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

地图

master
LiuJiaNan 2026-01-07 16:38:01 +08:00
parent 1407b78ce8
commit de7627f6e3
33 changed files with 356 additions and 352 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
src/assets/images/map_bi/back.png → src/assets/images/map_bi/back1.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.6 KiB

After

Width:  |  Height:  |  Size: 5.6 KiB

BIN
src/assets/images/map_bi/back2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

0
src/assets/images/map_bi/content/collapse_menu.png → src/assets/images/map_bi/content/collapse_menu1.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
src/assets/images/map_bi/content/collapse_menu2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

0
src/assets/images/map_bi/content/collapse_menu_bg.png → src/assets/images/map_bi/content/collapse_menu_bg1.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.6 KiB

After

Width:  |  Height:  |  Size: 5.6 KiB

BIN
src/assets/images/map_bi/content/collapse_menu_bg2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

0
src/assets/images/map_bi/top.png → src/assets/images/map_bi/top1.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 119 KiB

After

Width:  |  Height:  |  Size: 119 KiB

BIN
src/assets/images/map_bi/top2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 69 KiB

15
src/pages/Container/Map/components/CenterUtils/index.less
View File

@ -1,4 +1,4 @@
.center_options_container{
.center_options_container {
.center_options {
width: 408px;
position: absolute;
@ -45,7 +45,7 @@
}
}
.statistics{
.statistics {
width: 408px;
position: absolute;
top: 205px;
@ -54,20 +54,23 @@
gap: 5px;
color: #fff;
.statistic{
.statistic {
border-radius: 2px;
.title{
.title {
padding: 3px 0;
text-align: center;
border-radius: 2px;
}
.info{
.info {
padding: 7px 14px;
border: 1px solid rgb(44, 105, 172);
border-radius: 2px;
background-color: rgba(0, 41, 82, 0.722);
.value{}
.value {
}
}
}
}

0
src/pages/Container/Map/components/Content/port/IndexInfo/index.js → src/pages/Container/Map/components/Content/IndexInfo/index.js
View File

34
src/pages/Container/Map/components/Content/port/IndexInfo/index.less → src/pages/Container/Map/components/Content/IndexInfo/index.less
View File

@ -1,22 +1,17 @@
.index_info_container {
.block1 {
background-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0.8)
);
background-image: linear-gradient(to bottom,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0.8));
.options {
display: flex;
justify-content: space-between;
padding: 10px;
border: 1px solid;
border-image: linear-gradient(
to bottom,
rgba(58, 122, 149, 0),
rgba(58, 122, 149, 1)
)
1;
border-image: linear-gradient(to bottom,
rgba(58, 122, 149, 0),
rgba(58, 122, 149, 1)) 1;
border-top: none;
.option {
@ -61,22 +56,17 @@
}
.block2 {
background-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0.8)
);
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-image: linear-gradient(to bottom,
rgba(58, 122, 149, 0),
rgba(58, 122, 149, 1)) 1;
border-top: none;
display: flex;
flex-wrap: wrap;

9
src/pages/Container/Map/components/Content/branchOffice/Index/index.js Normal file
View File

@ -0,0 +1,9 @@
import "./index.less";
function Index() {
return (
<div>111</div>
);
}
export default Index;

0
src/pages/Container/Map/components/Content/branchOffice/Index/index.less Normal file
View File

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

@ -1,12 +1,16 @@
import { useContext, useEffect, useState } from "react";
import { CSSTransition, SwitchTransition } from "react-transition-group";
import collapseMenu from "~/assets/images/map_bi/content/collapse_menu.png";
import collapseMenuBg from "~/assets/images/map_bi/content/collapse_menu_bg.png";
import collapseMenuImg1 from "~/assets/images/map_bi/content/collapse_menu1.png";
import collapseMenuImg2 from "~/assets/images/map_bi/content/collapse_menu2.png";
import collapseMenuBg1 from "~/assets/images/map_bi/content/collapse_menu_bg1.png";
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 BranchOfficeIndex from "~/pages/Container/Map/components/Content/branchOffice/Index";
import IndexInfo from "~/pages/Container/Map/components/Content/IndexInfo";
import PortFengBi from "~/pages/Container/Map/components/Content/port/FengBi";
import IndexInfo from "~/pages/Container/Map/components/Content/port/IndexInfo";
import PortIndex from "~/pages/Container/Map/components/Content/port/Index";
import PortMenJin from "~/pages/Container/Map/components/Content/port/MenJin";
import PortIndex from "~/pages/Container/Map/components/Content/port/PortIndex";
import PortQiXiang from "~/pages/Container/Map/components/Content/port/QiXiang";
import PortRenYuan from "~/pages/Container/Map/components/Content/port/RenYuan";
import PortWeiXian from "~/pages/Container/Map/components/Content/port/WeiXian";
@ -42,25 +46,29 @@ function Content() {
};
const renderPortContent = () => {
if (!currentBranchOffice) {
const bottomUtilsCurrentType = bottomUtilsCurrentIndex !== -1 ? portUtilsList[bottomUtilsCurrentIndex].type : "";
if (bottomUtilsCurrentType === "" || bottomUtilsCurrentType === "camera")
return <PortIndex />;
if (bottomUtilsCurrentType === "door")
return <PortMenJin />;
if (bottomUtilsCurrentType === "fire")
return <PortXiaoFang />;
if (bottomUtilsCurrentType === "danger")
return <PortWeiXian />;
if (bottomUtilsCurrentType === "weather")
return <PortQiXiang />;
if (bottomUtilsCurrentType === "people")
return <PortRenYuan />;
if (bottomUtilsCurrentType === "project")
return <PortZhongDian />;
if (bottomUtilsCurrentType === "closedArea")
return <PortFengBi />;
}
const bottomUtilsCurrentType = bottomUtilsCurrentIndex !== -1 ? portUtilsList[bottomUtilsCurrentIndex].type : "";
if (bottomUtilsCurrentType === "" || bottomUtilsCurrentType === "camera")
return <PortIndex />;
if (bottomUtilsCurrentType === "door")
return <PortMenJin />;
if (bottomUtilsCurrentType === "fire")
return <PortXiaoFang />;
if (bottomUtilsCurrentType === "danger")
return <PortWeiXian />;
if (bottomUtilsCurrentType === "weather")
return <PortQiXiang />;
if (bottomUtilsCurrentType === "people")
return <PortRenYuan />;
if (bottomUtilsCurrentType === "project")
return <PortZhongDian />;
if (bottomUtilsCurrentType === "closedArea")
return <PortFengBi />;
};
const renderBranchOfficeContent = () => {
const bottomUtilsCurrentType = bottomUtilsCurrentIndex !== -1 ? branchOfficeUtilsList[bottomUtilsCurrentIndex].type : "";
if (bottomUtilsCurrentType === "")
return <BranchOfficeIndex />;
};
const renderContent = () => {
@ -70,7 +78,8 @@ function Content() {
return (
<div className="map_content_container__content">
{!currentPort && <IndexInfo />}
{currentPort === "00003" && renderPortContent()}
{(currentPort === "00003" && !currentBranchOffice) && renderPortContent()}
{currentBranchOffice && renderBranchOfficeContent()}
</div>
);
};
@ -78,14 +87,25 @@ function Content() {
const renderCollapseMenu = () => {
if (pureMap)
return null;
if (currentPort) {
if (currentPort === "00003" && !currentBranchOffice) {
return (
<div
className={`collapse_menu ${collapse ? "active" : ""}`}
style={{ backgroundImage: `url(${collapseMenuBg})` }}
className={`collapse_menu port ${collapse ? "active" : ""}`}
style={{ backgroundImage: `url(${collapseMenuBg1})` }}
onClick={onChangeCollapse}
>
<img src={collapseMenu} alt="" />
<img src={collapseMenuImg1} alt="" />
</div>
);
}
if (currentBranchOffice) {
return (
<div
className={`collapse_menu branch_office ${collapse ? "active" : ""}`}
style={{ backgroundImage: `url(${collapseMenuBg2})` }}
onClick={onChangeCollapse}
>
<img src={collapseMenuImg2} alt="" />
</div>
);
}

27
src/pages/Container/Map/components/Content/index.less
View File

@ -1,4 +1,4 @@
.map_content_container{
.map_content_container {
&__content {
width: 410px;
position: absolute;
@ -15,6 +15,7 @@
white-space: nowrap;
text-overflow: ellipsis;
}
// 第2-5行：多行省略
& when not (@i = 1) {
display: -webkit-box !important;
@ -34,8 +35,6 @@
}
.collapse_menu {
width: 30px;
height: 89px;
position: absolute;
left: 445px;
top: calc(50vh - 44.5px);
@ -52,12 +51,30 @@
}
img {
width: 10px;
height: 17px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(0);
}
&.port {
width: 30px;
height: 89px;
.img {
width: 10px;
height: 17px;
}
}
&.branch_office {
width: 33px;
height: 116px;
.img {
width: 13px;
height: 34px;
}
}
}
}

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

@ -13,6 +13,7 @@ import "./index.less";
const block2OptionsNavList = ["人员", "车辆"];
const block3OptionsNavList = ["人员", "车辆"];
function FengBi() {
const [block1List, setBlock1List] = useState([
{ img: icon29, title: "堆场区", count1: 0, count2: 0 },
@ -70,7 +71,7 @@ function FengBi() {
</div>
</div>
<div>
<div className="label">车辆数 </div>
<div className="label">车辆数</div>
<div className="value">
<CountUp end={+item.count2}></CountUp>
</div>

4
src/pages/Container/Map/components/Content/port/PortIndex/index.js → src/pages/Container/Map/components/Content/port/Index/index.js
View File

@ -20,7 +20,7 @@ import "./index.less";
const block3OptionsNavList = ["分公司统计", "相关方单位统计"];
function PortIndex() {
function Index() {
const { currentPort, area, currentBranchOffice } = useContext(Context);
const [block1OptionsList, setBlock1OptionsList] = useState([
@ -125,4 +125,4 @@ function PortIndex() {
);
}
export default PortIndex;
export default Index;

51
src/pages/Container/Map/components/Content/port/PortIndex/index.less → src/pages/Container/Map/components/Content/port/Index/index.less
View File

@ -1,22 +1,17 @@
.port_index {
.block1 {
background-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0.8)
);
background-image: linear-gradient(to bottom,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0.8));
.options {
display: flex;
justify-content: space-between;
padding: 10px;
border: 1px solid;
border-image: linear-gradient(
to bottom,
rgba(58, 122, 149, 0),
rgba(58, 122, 149, 1)
)
1;
border-image: linear-gradient(to bottom,
rgba(58, 122, 149, 0),
rgba(58, 122, 149, 1)) 1;
border-top: none;
.option {
@ -66,22 +61,17 @@
.block2 {
margin-top: 10px;
background-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0.8)
);
background-image: linear-gradient(to bottom,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0.8));
.options {
display: flex;
flex-wrap: wrap;
border: 1px solid;
border-image: linear-gradient(
to bottom,
rgba(58, 122, 149, 0),
rgba(58, 122, 149, 1)
)
1;
border-image: linear-gradient(to bottom,
rgba(58, 122, 149, 0),
rgba(58, 122, 149, 1)) 1;
border-top: none;
padding: 10px;
@ -134,20 +124,15 @@
.block3 {
margin-top: 10px;
background-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0.8)
);
background-image: linear-gradient(to bottom,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0.8));
.content {
border: 1px solid;
border-image: linear-gradient(
to bottom,
rgba(58, 122, 149, 0),
rgba(58, 122, 149, 1)
)
1;
border-image: linear-gradient(to bottom,
rgba(58, 122, 149, 0),
rgba(58, 122, 149, 1)) 1;
border-top: none;
padding: 10px;

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

@ -1,22 +1,17 @@
.menjin {
.block1 {
background-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0.8)
);
background-image: linear-gradient(to bottom,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0.8));
.options {
display: flex;
justify-content: space-between;
padding: 10px 15px;
border: 1px solid;
border-image: linear-gradient(
to bottom,
rgba(58, 122, 149, 0),
rgba(58, 122, 149, 1)
)
1;
border-image: linear-gradient(to bottom,
rgba(58, 122, 149, 0),
rgba(58, 122, 149, 1)) 1;
border-top: none;
.option {
@ -47,22 +42,17 @@
}
.block2 {
background-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0.8)
);
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-image: linear-gradient(to bottom,
rgba(58, 122, 149, 0),
rgba(58, 122, 149, 1)) 1;
border-top: none;
.main1_node {
@ -74,20 +64,15 @@
.block3 {
margin-top: 10px;
background-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0.8)
);
background-image: linear-gradient(to bottom,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0.8));
.content {
border: 1px solid;
border-image: linear-gradient(
to bottom,
rgba(58, 122, 149, 0),
rgba(58, 122, 149, 1)
)
1;
border-image: linear-gradient(to bottom,
rgba(58, 122, 149, 0),
rgba(58, 122, 149, 1)) 1;
border-top: none;
padding: 10px;

51
src/pages/Container/Map/components/Content/port/QiXiang/index.less
View File

@ -1,21 +1,16 @@
.qixiang {
.block1 {
background-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0.8)
);
background-image: linear-gradient(to bottom,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0.8));
margin-top: 20px;
.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-image: linear-gradient(to bottom,
rgba(58, 122, 149, 0),
rgba(58, 122, 149, 1)) 1;
border-top: none;
display: flex;
flex-wrap: wrap;
@ -60,22 +55,17 @@
}
.block2 {
background-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0.8)
);
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-image: linear-gradient(to bottom,
rgba(58, 122, 149, 0),
rgba(58, 122, 149, 1)) 1;
border-top: none;
display: flex;
flex-wrap: wrap;
@ -132,20 +122,15 @@
.block3 {
margin-top: 10px;
background-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0.8)
);
background-image: linear-gradient(to bottom,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0.8));
.content {
border: 1px solid;
border-image: linear-gradient(
to bottom,
rgba(58, 122, 149, 0),
rgba(58, 122, 149, 1)
)
1;
border-image: linear-gradient(to bottom,
rgba(58, 122, 149, 0),
rgba(58, 122, 149, 1)) 1;
border-top: none;
padding: 10px;

34
src/pages/Container/Map/components/Content/port/RenYuan/index.less
View File

@ -1,20 +1,15 @@
.renyuan {
.block1 {
background-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0.8)
);
background-image: linear-gradient(to bottom,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0.8));
.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-image: linear-gradient(to bottom,
rgba(58, 122, 149, 0),
rgba(58, 122, 149, 1)) 1;
border-top: none;
display: flex;
flex-wrap: wrap;
@ -73,20 +68,15 @@
.block2 {
margin-top: 10px;
background-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0.8)
);
background-image: linear-gradient(to bottom,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0.8));
.content {
border: 1px solid;
border-image: linear-gradient(
to bottom,
rgba(58, 122, 149, 0),
rgba(58, 122, 149, 1)
)
1;
border-image: linear-gradient(to bottom,
rgba(58, 122, 149, 0),
rgba(58, 122, 149, 1)) 1;
border-top: none;
padding: 10px;

60
src/pages/Container/Map/components/Content/port/WeiXian/index.less
View File

@ -1,42 +1,40 @@
.weixian {
.block1 {
background-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0.8)
);
background-image: linear-gradient(to bottom,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0.8));
.options {
display: flex;
justify-content: space-between;
padding: 13px 15px;
border: 1px solid;
border-image: linear-gradient(
to bottom,
rgba(58, 122, 149, 0),
rgba(58, 122, 149, 1)
)
1;
border-image: linear-gradient(to bottom,
rgba(58, 122, 149, 0),
rgba(58, 122, 149, 1)) 1;
border-top: none;
.option {
display: flex;
flex-direction: column;
align-items: center;
.circular{
.circular {
background-size: 100% 100%;
background-repeat: no-repeat;
width: 70px;
height: 70px;
text-align: center;
padding-top: 13px;
img{
img {
width: 25px;
height: 26px;
animation: weixianSlideY 2s infinite;
}
}
.label{
.label {
display: flex;
justify-content: center;
background-size: 100% 100%;
@ -55,41 +53,31 @@
.block2 {
margin-top: 10px;
background-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0.8)
);
background-image: linear-gradient(to bottom,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0.8));
.content {
padding: 10px 15px;
border: 1px solid;
border-image: linear-gradient(
to bottom,
rgba(58, 122, 149, 0),
rgba(58, 122, 149, 1)
)
1;
border-image: linear-gradient(to bottom,
rgba(58, 122, 149, 0),
rgba(58, 122, 149, 1)) 1;
border-top: none;
}
}
.block3 {
margin-top: 10px;
background-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0.8)
);
background-image: linear-gradient(to bottom,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0.8));
.content {
border: 1px solid;
border-image: linear-gradient(
to bottom,
rgba(58, 122, 149, 0),
rgba(58, 122, 149, 1)
)
1;
border-image: linear-gradient(to bottom,
rgba(58, 122, 149, 0),
rgba(58, 122, 149, 1)) 1;
border-top: none;
padding: 10px;

34
src/pages/Container/Map/components/Content/port/ZhongDian/index.less
View File

@ -1,22 +1,17 @@
.zhongdian {
.block1 {
background-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0.8)
);
background-image: linear-gradient(to bottom,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0.8));
.options {
display: flex;
justify-content: space-between;
border: 1px solid;
border-image: linear-gradient(
to bottom,
rgba(58, 122, 149, 0),
rgba(58, 122, 149, 1)
)
1;
border-image: linear-gradient(to bottom,
rgba(58, 122, 149, 0),
rgba(58, 122, 149, 1)) 1;
border-top: none;
.option {
@ -53,22 +48,17 @@
}
.block2 {
background-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0.8)
);
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-image: linear-gradient(to bottom,
rgba(58, 122, 149, 0),
rgba(58, 122, 149, 1)) 1;
border-top: none;
display: flex;
flex-wrap: wrap;

92
src/pages/Container/Map/components/Header/index.js
View File

@ -1,8 +1,10 @@
import { useContext, useEffect, useState } from "react";
import { CSSTransition } from "react-transition-group";
import backImg from "~/assets/images/map_bi/back.png";
import { useContext } from "react";
import { CSSTransition, SwitchTransition } from "react-transition-group";
import backImg1 from "~/assets/images/map_bi/back1.png";
import backImg2 from "~/assets/images/map_bi/back2.png";
import guangImg from "~/assets/images/map_bi/guang.png";
import topImg from "~/assets/images/map_bi/top.png";
import topImg1 from "~/assets/images/map_bi/top1.png";
import topImg2 from "~/assets/images/map_bi/top2.png";
import { Context } from "~/pages/Container/Map/js/context";
import mitt from "~/pages/Container/Map/js/mitt";
import {
@ -18,20 +20,15 @@ import {
} from "~/pages/Container/Map/js/mittKey";
import "./index.less";
function Header() {
function Header(props) {
const { currentPort, currentBranchOffice, mapMethods, area } = useContext(Context);
const [animationKey, setAnimationKey] = useState(0);
useEffect(() => {
setAnimationKey(Math.random());
}, []);
const onBack = () => {
sessionStorage.removeItem("mapCurrentBranchOfficeId");
mitt.emit(deletePeoplePositionPointMittKey);
if (currentPort !== "00003" && currentBranchOffice) {
mitt.emit(clickPortPointMittKey, { id: "" });
mitt.emit(clickBranchOfficePointMittKey, { id: "" });
mitt.emit(clickPortPointMittKey, { id: "", name: "秦港股份" });
mitt.emit(clickBranchOfficePointMittKey, { id: "", corpName: "秦港股份" });
mapMethods.current.removeWall();
mapMethods.current.removeFourColorDiagram();
mapMethods.current.removeBranchOfficePoint();
@ -40,7 +37,7 @@ function Header() {
mapMethods.current.addPortPoint();
}
else if (currentBranchOffice) {
mitt.emit(clickBranchOfficePointMittKey, { id: "" });
mitt.emit(clickBranchOfficePointMittKey, { id: "", corpName: "秦港股份" });
mapMethods.current.removeBranchOfficePoint();
mapMethods.current.removeMarkPoint();
mapMethods.current.returnPreviousCenterPoint();
@ -49,7 +46,7 @@ function Header() {
}, 2000);
}
else if (currentPort) {
mitt.emit(clickPortPointMittKey, { id: "" });
mitt.emit(clickPortPointMittKey, { id: "", name: "秦港股份" });
mapMethods.current.removeWall();
mapMethods.current.removeFourColorDiagram();
mapMethods.current.removeBranchOfficePoint();
@ -67,39 +64,40 @@ function Header() {
return (
<div className="header_container">
<CSSTransition
in={animationKey !== 0}
timeout={1000}
classNames={{
enter: "animate__animated",
enterActive: "animate__animated animate__fadeInDown",
exit: "animate__animated",
exitActive: "animate__animated animate__fadeOutUp",
}}
unmountOnExit
>
<header style={{ backgroundImage: `url(${topImg})` }}>
<CSSTransition
in={!!(currentPort || currentBranchOffice)}
timeout={1000}
classNames={{
enter: "animate__animated",
enterActive: "animate__animated animate__fadeInDown",
exit: "animate__animated",
exitActive: "animate__animated animate__fadeOutUp",
}}
unmountOnExit
<SwitchTransition>
<CSSTransition
timeout={1000}
classNames={{
enter: "animate__animated",
enterActive: "animate__animated animate__fadeInDown",
exit: "animate__animated",
exitActive: "animate__animated animate__fadeOutUp",
}}
unmountOnExit
key={currentBranchOffice || 1}
>
<header
className={`${props.headerTitle === "秦港股份安全监管平台" ? "port" : "branch_office"}`}
style={{ backgroundImage: `url(${props.headerTitle === "秦港股份安全监管平台" ? topImg1 : topImg2})` }}
>
<div
style={{ backgroundImage: `url(${backImg})` }}
className="back"
onClick={onBack}
/>
</CSSTransition>
<div className="title">秦港股份安全监管平台</div>
<div style={{ backgroundImage: `url(${guangImg})` }} className="guang" />
</header>
</CSSTransition>
{(currentPort && props.headerTitle === "秦港股份安全监管平台") && (
<div
style={{ backgroundImage: `url(${backImg1})` }}
className="back"
onClick={onBack}
/>
)}
{props.headerTitle !== "秦港股份安全监管平台" && (
<div className="back" onClick={onBack}>
<img src={backImg2} alt="" />
<div>返回</div>
</div>
)}
<div className="title">{props.headerTitle}</div>
<div style={{ backgroundImage: `url(${guangImg})` }} className="guang" />
</header>
</CSSTransition>
</SwitchTransition>
</div>
);
}

126
src/pages/Container/Map/components/Header/index.less
View File

@ -1,58 +1,80 @@
.header_container {
header {
width: 100%;
height: 70px;
header {
width: 100%;
height: 70px;
background-size: 100% 100%;
background-repeat: no-repeat;
font-size: 40px;
color: #fff;
text-align: center;
font-weight: bold;
position: absolute;
&.port {
padding-top: 10px;
.back {
background-size: 100% 100%;
background-repeat: no-repeat;
font-size: 40px;
color: #fff;
text-align: center;
padding-top: 10px;
font-weight: bold;
width: 100px;
height: 30px;
position: absolute;
.back {
background-size: 100% 100%;
background-repeat: no-repeat;
width: 100px;
height: 30px;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
}
.title {
background-image: linear-gradient(to bottom, #5bb4f7, #ffffff);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 34px;
}
.guang {
background-size: 100% 100%;
background-repeat: no-repeat;
width: 707px;
height: 85px;
position: absolute;
top: 25px;
left: 50%;
animation: headerContainerScale 2s infinite;
@keyframes headerContainerScale {
0% {
transform: translateX(-50%) scale(1);
}
50% {
transform: translateX(-50%) scale(0.5);
}
100% {
transform: translateX(-50%) scale(1);
}
}
}
top: 0;
left: 0;
cursor: pointer;
}
}
&.branch_office {
.back {
position: absolute;
top: calc(50% - 15px);
left: 30px;
cursor: pointer;
display: flex;
align-items: center;
gap: 5px;
font-size: 14px;
font-weight: normal;
img {
width: 20px;
height: 20px;
}
}
}
.title {
background-image: linear-gradient(to bottom, #5bb4f7, #ffffff);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 34px;
}
.guang {
background-size: 100% 100%;
background-repeat: no-repeat;
width: 707px;
height: 85px;
position: absolute;
top: 25px;
left: 50%;
animation: headerContainerScale 2s infinite;
@keyframes headerContainerScale {
0% {
transform: translateX(-50%) scale(1);
}
50% {
transform: translateX(-50%) scale(0.5);
}
100% {
transform: translateX(-50%) scale(1);
}
}
}
}
}

5
src/pages/Container/Map/components/RightUtils/index.js
View File

@ -165,7 +165,10 @@ function RightUtils(props) {
}
</div>
</CSSTransition>
<div className={`bg ${isShowChildLevel ? "active" : ""}`} onClick={() => setIsShowChildLevel(!isShowChildLevel)}>
<div
className={`bg ${isShowChildLevel ? "active" : ""}`}
onClick={() => setIsShowChildLevel(!isShowChildLevel)}
>
<img src={buttonBg} alt="" />
</div>
</div>

2
src/pages/Container/Map/components/popup/js/Coord.js
View File

@ -1,6 +1,8 @@
const Cesium = window.Cesium;
export class Coord {
viewer;
constructor(viewer) {
this.viewer = viewer;
}

1
src/pages/Container/Map/components/popup/js/Popup.js
View File

@ -8,6 +8,7 @@ export class Popup {
moving = false;
postRender;
coord;
constructor(viewer, options) {
this.viewer = viewer;
this.coord = new Coord(viewer);

1
src/pages/Container/Map/components/popup/js/PopupInfo.js
View File

@ -6,6 +6,7 @@ export default class PopupInfo {
element;
popup;
reactRoot;
constructor(viewer, options) {
this.viewer = viewer;
this.init(options);

13
src/pages/Container/Map/index.js
View File

@ -34,10 +34,13 @@ function Map() {
const [area, setArea] = useState(""); // 当前选中的港口为秦皇岛港时的区域
const [bottomUtilsCurrentIndex, setBottomUtilsCurrentIndex] = useState(""); // 当前选中的下方按钮的索引
const [pureMap, setPureMap] = useState(false); // 是否选中了右侧的纯净地图
const [headerTitle, setHeaderTitle] = useState("秦港股份安全监管平台"); // 当前头部的标题
useMount(() => {
autoFit.init({ dw: 1920, dh: 1080, el: "#contentContainer", resize: true });
sessionStorage.removeItem("mapCurrentBranchOfficeId");
const initMap = new InitMap();
const { viewer: viewerInstance, mapMethods: mapMethodsInstance }
= initMap.initMap();
@ -54,11 +57,17 @@ function Map() {
mitt.on(clickPortPointMittKey, (data) => {
setCurrentPort(data.id);
if (data.id !== "00003")
if (data.id === "00003") {
setHeaderTitle("秦港股份安全监管平台");
}
else {
setCurrentBranchOffice(data.corpinfoId);
setHeaderTitle(`${data.name}安全监管平台`);
}
});
mitt.on(clickBranchOfficePointMittKey, (data) => {
setCurrentBranchOffice(data.id);
setHeaderTitle(`${data.corpName || data.name}安全监管平台`);
});
mitt.on(changeCoverMaskVisibleMittKey, (data) => {
setCoverMaskVisible(data);
@ -90,7 +99,7 @@ function Map() {
<Context.Provider value={providerValues}>
<div id="cesiumContainer" />
<div id="contentContainer">
<Header />
<Header headerTitle={headerTitle} />
<CenterUtils setArea={setArea} />
<RightUtils isFullscreen={isFullscreen} toggleFullscreen={toggleFullscreen} setPureMap={setPureMap} />
<BottomUtils setBottomUtilsCurrentIndex={setBottomUtilsCurrentIndex} />

1
src/pages/Container/Map/js/WallPolylineTrailLinkMaterialProperty.js
View File

@ -17,6 +17,7 @@ function WallPolylineTrailLinkMaterialProperty(
this.duration = options.duration;
this._time = new Date().getTime();
}
Object.defineProperties(WallPolylineTrailLinkMaterialProperty.prototype, {
isConstant: {
get() {

1
src/pages/Container/Map/js/mapMethods.js
View File

@ -342,6 +342,7 @@ export default class MapMethods {
.toDataURL();
}
customStyle();
function customStyle() {
if (Cesium.defined(removeListener)) {
removeListener();

17
src/pages/Container/Map/js/pointClickEvent.js
View File

@ -68,21 +68,25 @@ export default class PointClickEvent {
#clickPortPointEnter = (data) => {
this.closePopup();
this.#mapMethods.removePortPoint();
this.#mapMethods.flyTo({ longitude: data.position.x, latitude: data.position.y, height: 10000 });
setTimeout(() => {
if (data.id === "00003") {
this.#mapMethods.flyTo({ longitude: data.position.x, latitude: data.position.y, height: 10000 });
this.#mapMethods.addBranchOfficePoint();
mitt.emit(clickPortPointMittKey, data);
}
else {
this.#mapMethods.flyTo({ longitude: data.position.x, latitude: data.position.y, height: 2000 });
this.#mapMethods.addBranchOfficePoint("", {
corpName: data.name,
corpinfoId: data.corpinfoId,
longitude: data.position.x,
latitude: data.position.y,
});
mitt.emit(clickPortPointMittKey, data);
mitt.emit(clickBranchOfficePointMittKey, data);
sessionStorage.setItem("mapCurrentBranchOfficeId", data.corpinfoId);
}
}, 2000);
mitt.emit(clickPortPointMittKey, data);
mitt.emit(changeBottomUtilsAnimationMittKey);
mitt.emit(resetBottomCurrentIndexMittKey);
mitt.emit(resetAllBottomUtilsCheckMittKey);
@ -91,6 +95,8 @@ export default class PointClickEvent {
// 分公司点位点击
#clickBranchOfficePoint = async (data) => {
if (data.id === sessionStorage.getItem("mapCurrentBranchOfficeId"))
return;
// const { info } = await getCorpInfo({ id: data.id });
const info = {};
const position = getPosition(data.longitude, data.latitude);
@ -113,13 +119,10 @@ export default class PointClickEvent {
this.#mapMethods.removeBranchOfficePoint();
this.#mapMethods.removeMarkPoint();
this.#mapMethods.addBranchOfficePoint("", data);
this.#mapMethods.flyTo({
longitude: data.longitude,
latitude: data.latitude,
height: 2000,
});
this.#mapMethods.flyTo({ longitude: data.longitude, latitude: data.latitude, height: 2000 });
mitt.emit(deletePeoplePositionPointMittKey);
mitt.emit(clickBranchOfficePointMittKey, data);
sessionStorage.setItem("mapCurrentBranchOfficeId", data.corpinfoId);
mitt.emit(changeBottomUtilsAnimationMittKey);
mitt.emit(resetBottomCurrentIndexMittKey);
mitt.emit(resetAllBottomUtilsCheckMittKey);