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

地图

master
LiuJiaNan 2026-01-21 10:16:36 +08:00
parent 5281d4e4af
commit fb5c81f758
6 changed files with 53 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/pages/Container/Map/components/Content/IndexInfo/Bottom/index.less
View File

@ -1,14 +1,12 @@
.index_info_container { .index_info_container {
.bottom-container_con { .bottom-container_con {
flex: 1; width: calc(100% - 880px);
height: 240px; height: 240px;
padding: 20px; position: absolute;
box-sizing: border-box; z-index: 2;
margin-top: 750px; bottom: -1030px;
margin-left: 10px; left: 50%;
margin-right: 10px; transform: translateX(-50%);
.top_container { .top_container {
display: flex; display: flex;
@ -27,10 +25,10 @@
background: rgba(1, 50, 115, 0.5); background: rgba(1, 50, 115, 0.5);
line-height: 30px; line-height: 30px;
margin-left: 2px; margin-left: 2px;
font-size: 13px;
.item { .item {
padding: 0 10px; padding: 0 10px;
font-size: 13px;
&:hover { &:hover {
cursor: pointer; cursor: pointer;
@ -47,17 +45,17 @@
.bottom-container { .bottom-container {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
gap: 10px;
.left { .left {
width: 60%; width: 66%;
background: rgba(0, 41, 82, 0.68); background: rgba(0, 41, 82, 0.68);
border-radius: 4px; border-radius: 4px;
border: 1px solid rgba(44, 105, 172, 0.6); border: 1px solid rgba(44, 105, 172, 0.6);
padding: 10px; padding: 10px;
margin-right: 10px;
.main { .main {
width: 100%; width: 870px;
height: 160px; height: 160px;
background-size: 100% 100%; background-size: 100% 100%;
margin-top: 10px; margin-top: 10px;
@ -105,7 +103,7 @@
} }
.right { .right {
width: 40%; width: 33%;
background: rgba(0, 41, 82, 0.68); background: rgba(0, 41, 82, 0.68);
border-radius: 4px; border-radius: 4px;
border: 1px solid rgba(44, 105, 172, 0.6); border: 1px solid rgba(44, 105, 172, 0.6);
@ -159,3 +157,4 @@
} }
} }
} }

8
src/pages/Container/Map/components/Content/IndexInfo/LeftPanel/index.js
View File

@ -4,12 +4,12 @@ import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
import img9 from "~/assets/images/public/bigScreen/bg9.png"; import img9 from "~/assets/images/public/bigScreen/bg9.png";
import img8 from "~/assets/images/public/bigScreen/bg10.png"; import img8 from "~/assets/images/public/bigScreen/bg10.png";
import img7 from "~/assets/images/public/bigScreen/ico3.png"; import img7 from "~/assets/images/public/bigScreen/ico3.png";
import rightbg from "~/assets/images/public/bigScreen/leftbg.png";
import img5 from "~/assets/images/public/bigScreen/tablebg1.png"; import img5 from "~/assets/images/public/bigScreen/tablebg1.png";
import img6 from "~/assets/images/public/bigScreen/tablebg2.png"; import img6 from "~/assets/images/public/bigScreen/tablebg2.png";
import img3 from "~/assets/images/public/bigScreen/w_ico1.png"; import img3 from "~/assets/images/public/bigScreen/w_ico1.png";
import img4 from "~/assets/images/public/bigScreen/w_ico2.png"; import img4 from "~/assets/images/public/bigScreen/w_ico2.png";
import img2 from "~/assets/images/public/weather/1.png"; import img2 from "~/assets/images/public/weather/1.png";
import left from "~/assets/images/public/bigScreen/leftbg.png";
import Title from "~/pages/Container/Map/components/Content/IndexInfo/Title"; import Title from "~/pages/Container/Map/components/Content/IndexInfo/Title";
import { initEcharts1 } from "./echarts"; import { initEcharts1 } from "./echarts";
import "./index.less"; import "./index.less";
@ -66,8 +66,8 @@ function LeftScreen() {
}); });
return ( return (
<div className="left-container" > <div className="left-container">
<div className="left-container_bg" style={{ backgroundImage: `url(${left})` }}></div> <div className="left-container_bg" style={{ backgroundImage: `url(${rightbg})` }}></div>
<div className="block1"> <div className="block1">
<Title title="天气预报情况" /> <Title title="天气预报情况" />
<div className="main"> <div className="main">
@ -174,7 +174,7 @@ function LeftScreen() {
<div className="block3"> <div className="block3">
<Title title="领域整改情况统计" /> <Title title="领域整改情况统计" />
<div className="main"> <div className="main">
<div ref={main1Ref} style={{ width: "400px", height: "180px" }} /> <div ref={main1Ref} style={{ width: "100%", height: "180px" }} />
</div> </div>
</div> </div>
<div className="block4"> <div className="block4">

59
src/pages/Container/Map/components/Content/IndexInfo/LeftPanel/index.less
View File

@ -1,24 +1,25 @@
.index_info_container { .index_info_container {
.left-container_bg{
width: 600px;
height: 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
.left-container { .left-container {
width: 400px; width: 400px;
margin-top: 60px; position: absolute;
left: 20px;
.left-container_bg{ top: 60px;
width: 100%; max-height: calc(100vh - 75px);
height: 100%;
background-size: 100% 100%;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
.block1 { .block1 {
border-radius: 4px; border-radius: 4px;
.main { .main {
display: flex; display: flex;
align-items: center; align-items: center;
@ -63,8 +64,7 @@
grid-template-columns: 1fr 1fr 2fr; grid-template-columns: 1fr 1fr 2fr;
color: #ffffff; color: #ffffff;
padding: 5px; padding: 5px;
font-size: 12px;
background-size: 100% 100%;
} }
.scroll { .scroll {
@ -76,7 +76,7 @@
grid-template-columns: 1fr 1fr 2fr; grid-template-columns: 1fr 1fr 2fr;
color: #ffffff; color: #ffffff;
padding: 5px; padding: 5px;
font-size: 12px;
margin: 5px auto; margin: 5px auto;
.fc1 { .fc1 {
@ -96,11 +96,9 @@
} }
.block2 { .block2 {
margin-top: 20px; margin-top: 10px;
border-radius: 4px; border-radius: 4px;
.main { .main {
.warning { .warning {
border-style: solid; border-style: solid;
@ -124,7 +122,7 @@
justify-content: space-between; justify-content: space-between;
.list { .list {
width: 49%; width: 48%;
background-size: 100% 100%; background-size: 100% 100%;
padding: 5px; padding: 5px;
color: #ffffff; color: #ffffff;
@ -142,7 +140,7 @@
.item { .item {
width: 50%; width: 50%;
margin: 2px 0; margin: 2px 0;
font-size: 12px;
.fcr { .fcr {
color: #f90102; color: #f90102;
@ -157,9 +155,8 @@
.main_con1 { .main_con1 {
.item { .item {
margin: 2px 0; margin: 2px 0;
font-size: 12px;
line-height: 22px; line-height: 22px;
word-break: break-all;
width: 100%;
.fcr { .fcr {
color: #f90102; color: #f90102;
@ -171,6 +168,7 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
border-bottom: 1px solid #163682; border-bottom: 1px solid #163682;
font-size: 12px;
line-height: 30px; line-height: 30px;
.info { .info {
@ -193,17 +191,14 @@
} }
.block3 { .block3 {
margin-top: 0; margin-top: 10px;
border-radius: 4px; border-radius: 4px;
width: 100%;
} }
.block4 { .block4 {
margin-top: 20px; margin-top: 10px;
border-radius: 4px; border-radius: 4px;
.main { .main {
.table { .table {
margin-top: 10px; margin-top: 10px;
@ -213,13 +208,13 @@
grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
color: #ffffff; color: #ffffff;
padding: 5px; padding: 5px;
font-size: 12px;
background: rgba(39, 101, 175, 0.5); background: rgba(39, 101, 175, 0.5);
text-align: center; text-align: center;
background-size: 100% 100%;
} }
.scroll { .scroll {
height: 100px; height: 120px;
overflow-y: hidden; overflow-y: hidden;
.table-container { .table-container {
@ -227,7 +222,7 @@
grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
color: #ffffff; color: #ffffff;
padding: 5px; padding: 5px;
font-size: 12px;
margin: 5px auto; margin: 5px auto;
background: rgba(17, 51, 122, 0.5); background: rgba(17, 51, 122, 0.5);
text-align: center; text-align: center;

10
src/pages/Container/Map/components/Content/IndexInfo/RightPanel/index.less
View File

@ -3,17 +3,20 @@
width: 600px; width: 600px;
height: 100%; height: 100%;
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat;
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; right: 0;
z-index: -1; z-index: -1;
transform: rotate(180deg); transform: rotate(180deg);
} }
.right-container { .right-container {
width: 400px; width: 400px;
margin-top: 60px; position: absolute;
right: 20px;
top: 60px;
max-height: calc(100vh - 75px);
.block1 { .block1 {
@ -190,3 +193,4 @@
} }
} }
} }

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

@ -8,11 +8,9 @@ import "./index.less";
function IndexInfo(props) { function IndexInfo(props) {
return ( return (
<div className="index_info_container"> <div className="index_info_container">
<div className="index_info_con"> <LeftPanel />
<LeftPanel /> <Bottom />
<Bottom /> <RightPanel />
<RightPanel />
</div>
<Search /> <Search />
<Btn history={props.history} /> <Btn history={props.history} />
</div> </div>

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

@ -1,14 +1,3 @@
.index_info_container { .index_info_container {
overflow: hidden;
.index_info_con{
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
padding: 20px;
box-sizing: border-box;
overflow: hidden;
}
} }