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

地图

master
LiuJiaNan 2026-01-09 09:10:49 +08:00
parent f94518a434
commit 214b5bfb70
13 changed files with 487 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

132
src/pages/Container/Map/components/Content/branchOffice/MenJin/echarts.js Normal file
View File

@ -0,0 +1,132 @@
import * as echarts from "echarts";
export const initEcharts1 = (main1Ref, chartInstance, data) => {
chartInstance.current = echarts.init(main1Ref.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 = {
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: "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);
};

174
src/pages/Container/Map/components/Content/branchOffice/MenJin/index.js Normal file
View File

@ -0,0 +1,174 @@
import { useMount } from "ahooks";
import { useRef, useState } from "react";
import CountUp from "react-countup";
import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
import icon1 from "~/assets/images/map_bi/content/ico15.png";
import icon2 from "~/assets/images/map_bi/content/ico16.png";
import icon3 from "~/assets/images/map_bi/content/ico17.png";
import icon4 from "~/assets/images/map_bi/content/ico18.png";
import icon5 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 MenJin() {
const [block1List, setBlock1List] = useState([
{ label: "封闭区域数", count: 123, icon: icon1 },
{ label: "车行通道数", count: 123, icon: icon2 },
{ label: "人行通道数", count: 123, icon: icon3 },
{ label: "封闭区域当前人数", count: 123, icon: icon4 },
]);
const [block2Index, setBlock2Index] = useState(0);
const [block3Index, setBlock3Index] = useState(0);
const [block3List, setBlock3List] = useState([
{ permissionRange: "A区", status: "1", applicant: "张三", approver: "李主管" },
{ permissionRange: "B区", status: "1", applicant: "李四", approver: "王经理" },
{ permissionRange: "C区", status: "1", applicant: "王五", approver: "赵主任" },
{ permissionRange: "D区", status: "0", applicant: "赵六", approver: "钱总监" },
{ permissionRange: "E区", status: "0", applicant: "钱七", approver: "孙部长" },
{ permissionRange: "F区", status: "0", applicant: "孙八", approver: "周经理" },
{ permissionRange: "G区", status: "0", applicant: "周九", approver: "吴主任" },
{ permissionRange: "H区", status: "1", applicant: "吴十", approver: "郑主管" },
{ permissionRange: "I区", status: "0", applicant: "郑一", approver: "王总监" },
{ permissionRange: "J区", status: "1", applicant: "王二", approver: "张部长" },
]);
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_menjin">
<div className="block1">
<Title title="封闭区域统计" />
<div className="options">
<div className="items">
{
block1List.map((item, index) => (
<div className="item" key={index}>
<div className="img">
<img src={item.icon} alt="" />
</div>
<div className="info">
<div className="label">{item.label}</div>
<div className="count">
<CountUp end={+item.count}></CountUp>
</div>
</div>
<div className="corner-img top-left-img">
<img src={icon5} alt="" />
</div>
<div className="corner-img top-right-img">
<img src={icon5} alt="" />
</div>
<div className="corner-img bottom-left-img">
<img src={icon5} alt="" />
</div>
<div className="corner-img bottom-right-img">
<img src={icon5} alt="" />
</div>
</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} className="main1_node" 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="table">
<div className="tr">
<div className="td">权限范围</div>
<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.permissionRange}</div>
<div className="td" style={{ color: item.status === "1" ? "#FC6B13" : "#fff" }}>{item.status === "1" ? "临时" : "长期"}</div>
<div className="td">{item.applicant}</div>
<div className="td">{item.approver}</div>
</div>
))}
</SeamlessScroll>
</div>
</div>
</div>
</div>
);
}
export default MenJin;

168
src/pages/Container/Map/components/Content/branchOffice/MenJin/index.less Normal file
View File

@ -0,0 +1,168 @@
.branch_office_menjin {
.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 {
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;
.items {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-between;
gap: 10px 20px;
.item {
position: relative;
width: calc(50% - 10px);
display: flex;
align-items: center;
color: #fff;
padding: 9px 0 9px 9px;
background-color: rgba(1, 56, 154, 0.26);
border: 1px solid #2091F3;
.img {
background-color: #102561;
border: 1px solid #19455B;
border-radius: 4px;
padding: 8px;
margin-right: 10px;
img {
width: 35px;
height: 30px;
}
}
.info {
.label {
font-weight: bold;
}
.count {
}
}
.corner-img {
position: absolute;
width: 12px;
height: 12px;
&.top-left-img {
top: -10px;
left: -3px;
}
&.top-right-img {
transform: rotate(90deg);
top: -3px;
right: -10px;
}
&.bottom-left-img {
transform: rotate(270deg);
bottom: -3px;
left: -10px;
}
&.bottom-right-img {
transform: rotate(180deg);
bottom: -10px;
right: -3px;
}
}
}
}
}
}
.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-image: linear-gradient(to bottom,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0.8));
margin-top: 10px;
.tabs {
.tabs-style();
}
.table {
padding: 10px;
.scroll {
height: 300px;
overflow-y: hidden;
.tr {
&:nth-child(odd) {
background-color: transparent;
}
}
}
.tr {
display: grid;
grid-template-columns: repeat(4, 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;
}
}
}
}
}
}

1
src/pages/Container/Map/components/Content/branchOffice/Title/index.js
View File

@ -7,6 +7,7 @@ function Title(props) {
<div className="basic">
<div className="label">{props.title}</div>
</div>
<div className="extra">{props.extra}</div>
</div>
);
}

4
src/pages/Container/Map/components/Content/branchOffice/Title/index.less
View File

@ -18,4 +18,8 @@
padding-left: 25px;
}
}
.extra {
margin-right: 5px;
}
}

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

@ -7,6 +7,7 @@ import { branchOfficeUtilsList } from "~/pages/Container/Map/components/BottomUt
import { portUtilsList } from "~/pages/Container/Map/components/BottomUtils/portUtilsList";
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 BranchWeiXian from "~/pages/Container/Map/components/Content/branchOffice/WeiXian";
import IndexInfo from "~/pages/Container/Map/components/Content/IndexInfo";
import PortFengBi from "~/pages/Container/Map/components/Content/port/FengBi";
@ -52,6 +53,8 @@ function Content() {
return <BranchOfficeIndexLeft />;
if (bottomUtilsCurrentType === "danger")
return <BranchWeiXian />;
if (bottomUtilsCurrentType === "door")
return <BranchMenJin />;
};
const renderBranchOfficeContentRight = () => {

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

@ -4,7 +4,7 @@ import "./index.less";
const BranchOffice = ({ info, close, enter }) => {
return (
<div className="box">
<div className="map_content_box">
<div className="box-wrap">
<div className="area">
<div></div>

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

@ -4,7 +4,7 @@ import "./index.less";
const Port = ({ info, close, enter }) => {
return (
<div className="box">
<div className="map_content_box">
<div className="box-wrap">
<div className="area">
<div></div>

6
src/pages/Container/Map/components/popup/components/index.less
View File

@ -1,4 +1,4 @@
.box {
.map_content_box {
width: 300px;
position: relative;
bottom: 0;
@ -13,7 +13,7 @@
border: 1px solid #42698f;
background-color: rgb(35 53 93 / 74%);
box-shadow: 0 0 10px 2px #000000;
animation: slide-in-elliptic-bottom-fwd 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) both;
animation: map_content_box-slide-in-elliptic-bottom-fwd 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) both;
.area {
padding: 5px 10px;
@ -95,7 +95,7 @@
}
}
@keyframes slide-in-elliptic-bottom-fwd {
@keyframes map_content_box-slide-in-elliptic-bottom-fwd {
0% {
transform: translateY(300px) rotate(10deg) scale(0.3);
transform-origin: 50% 100%;