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:16:01 +08:00
parent 9d341c8034
commit 937bfedba5
7 changed files with 365 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,7 +8,6 @@ export const initEcharts1 = (mainRef, chartInstance, data) => {
const names = data.map(item => item.NAME);
const option = {
color: ["#1A64F8"],
tooltip: {
trigger: "axis",
axisPointer: {

1
src/pages/Container/Map/components/Content/branchOffice/RenYuan/echarts.js
View File

@ -39,7 +39,6 @@ export const initEcharts2 = (mainRef, chartInstance, data) => {
const names = data.map(item => item.name);
const option = {
color: ["#1A64F8"],
tooltip: {
trigger: "axis",
axisPointer: {

131
src/pages/Container/Map/components/Content/branchOffice/ZhongDian/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 waitStartData = data.map(item => Number.parseInt(item.WAIT_START));
const inProgressData = data.map(item => Number.parseInt(item.IN_PROGRESS));
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(0,168,255,0.7)",
},
{
offset: 0,
color: "#00A8FF",
},
]),
},
barWidth: "10",
data: waitStartData,
},
{
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: inProgressData,
},
],
};
chartInstance.current.setOption(option);
};

122
src/pages/Container/Map/components/Content/branchOffice/ZhongDian/index.js Normal file
View File

@ -0,0 +1,122 @@
import { useMount } from "ahooks";
import { useRef, useState } from "react";
import CountUp from "react-countup";
import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
import AliPlayer from "zy-react-library/components/Video/AliPlayer";
import icon1 from "~/assets/images/map_bi/content/ico19.png";
import Title from "~/pages/Container/Map/components/Content/branchOffice/Title";
import { initEcharts1 } from "./echarts";
import "./index.less";
function ZhongDian() {
const [block1List, setBlock1List] = useState([
{ label: "项目总数", value: 34, icon: icon1 },
{ label: "待开工项目数", value: 34, icon: icon1 },
{ label: "进行中项目数", value: 34, icon: icon1 },
]);
const [block3List, setBlock3List] = useState([
{ projectName: "北京地铁17号线工程", contractor: "中建一局", inspections: 25, hazards: 3, penaltyAmount: 15000 },
{ projectName: "上海浦东国际机场扩建", contractor: "中铁建工", inspections: 32, hazards: 5, penaltyAmount: 25000 },
{ projectName: "广州南沙大桥建设", contractor: "中交一航", inspections: 18, hazards: 2, penaltyAmount: 12000 },
{ projectName: "深圳国际会展中心", contractor: "中建三局", inspections: 45, hazards: 8, penaltyAmount: 35000 },
{ projectName: "杭州亚运会场馆改造", contractor: "中国建筑", inspections: 28, hazards: 4, penaltyAmount: 18000 },
{ projectName: "成都天府国际机场", contractor: "中冶集团", inspections: 38, hazards: 6, penaltyAmount: 28000 },
{ projectName: "武汉长江隧道工程", contractor: "中电建", inspections: 22, hazards: 1, penaltyAmount: 8000 },
{ projectName: "西安高新区基础设施", contractor: "中石化建设", inspections: 41, hazards: 7, penaltyAmount: 32000 },
{ projectName: "南京长江大桥维修", contractor: "中国化学", inspections: 15, hazards: 2, penaltyAmount: 10000 },
{ projectName: "重庆轨道交通5号线", contractor: "中国铁建", inspections: 35, hazards: 4, penaltyAmount: 20000 },
]);
const chartInstance = useRef(null);
const main1Ref = useRef(null);
useMount(() => {
initEcharts1(main1Ref, chartInstance, [
{ NAME: "中建一局", WAIT_START: "12", IN_PROGRESS: "8" },
{ NAME: "中铁建工", WAIT_START: "15", IN_PROGRESS: "10" },
{ NAME: "中交一航", WAIT_START: "8", IN_PROGRESS: "12" },
{ NAME: "中建三局", WAIT_START: "20", IN_PROGRESS: "15" },
{ NAME: "中国建筑", WAIT_START: "5", IN_PROGRESS: "7" },
{ NAME: "中冶集团", WAIT_START: "18", IN_PROGRESS: "14" },
{ NAME: "中电建", WAIT_START: "10", IN_PROGRESS: "9" },
{ NAME: "中石化建设", WAIT_START: "22", IN_PROGRESS: "18" },
{ NAME: "中国化学", WAIT_START: "7", IN_PROGRESS: "5" },
{ NAME: "中国铁建", WAIT_START: "16", IN_PROGRESS: "13" },
]);
return () => {
if (chartInstance.current) {
chartInstance.current.dispose();
chartInstance.current = null;
}
};
});
return (
<div className="branch_office_zhongdian">
<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="value">
<CountUp end={+item.value}></CountUp>
</div>
</div>
</div>
))
}
</div>
</div>
</div>
<div className="block2">
<Title title="承包项目情况" />
<div className="options">
<div ref={main1Ref} style={{ width: "100%", height: "260px" }} />
</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 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.projectName}</div>
<div className="td">{item.contractor}</div>
<div className="td">{item.inspections}</div>
<div className="td">{item.hazards}</div>
<div className="td">{item.penaltyAmount}</div>
</div>
))}
</SeamlessScroll>
</div>
</div>
</div>
</div>
<div className="block4">
<Title title="移动监控情况" />
<div className="options">
<AliPlayer source="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4" height="150px" isLive />
</div>
</div>
</div>
);
}
export default ZhongDian;

109
src/pages/Container/Map/components/Content/branchOffice/ZhongDian/index.less Normal file
View File

@ -0,0 +1,109 @@
.branch_office_zhongdian {
.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;
justify-content: space-around;
.item {
text-align: center;
color: #fff;
.img {
margin-bottom: 10px;
img {
width: 65px;
height: 45px;
}
}
.info {
.label {
font-size: 14px;
}
.value {
font-size: 18px;
}
}
}
}
}
}
.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-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;
.table {
margin-top: 5px;
.scroll {
height: 155px;
overflow-y: hidden;
}
.tr {
margin-top: 5px;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1.5fr 1fr;
background-color: rgba(17, 51, 112, 0.8);
.td {
text-align: center;
font-size: 12px;
color: #fff;
padding: 5px;
}
}
}
}
}
.block4 {
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;
}
}
}

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

@ -12,6 +12,7 @@ import BranchQiXiang from "~/pages/Container/Map/components/Content/branchOffice
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 BranchZhongDian from "~/pages/Container/Map/components/Content/branchOffice/ZhongDian";
import IndexInfo from "~/pages/Container/Map/components/Content/IndexInfo";
import PortFengBi from "~/pages/Container/Map/components/Content/port/FengBi";
import PortIndex from "~/pages/Container/Map/components/Content/port/Index";
@ -64,6 +65,8 @@ function Content() {
return <BranchRenYuan />;
if (bottomUtilsCurrentType === "weather")
return <BranchQiXiang />;
if (bottomUtilsCurrentType === "project")
return <BranchZhongDian />;
};
const renderBranchOfficeContentRight = () => {

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

@ -8,7 +8,6 @@ export const initEcharts1 = (mainRef, chartInstance, data) => {
const names = data.map(item => item.NAME);
const option = {
color: ["#1A64F8"],
tooltip: {
trigger: "axis",
axisPointer: {