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

监管平台bi

master
鲁洪霞 2026-01-16 17:00:21 +08:00
parent 518449613a
commit 6ac4ffc4e8
12 changed files with 111 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/public/bigScreen/btnbg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
src/assets/images/public/bigScreen/leftbg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 45 KiB

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

@ -1,6 +1,6 @@
.index_info_container { .index_info_container {
.bottom-container_con { .bottom-container_con {
width: 1120px; width: 1350px;
height: 240px; height: 240px;
position: absolute; position: absolute;
bottom: 35px; bottom: 35px;
@ -10,7 +10,6 @@
.top_container { .top_container {
display: flex; display: flex;
color: #ffffff; color: #ffffff;
font-size: 12px;
margin-bottom: 10px; margin-bottom: 10px;
.title { .title {
@ -46,13 +45,14 @@
justify-content: space-between; justify-content: space-between;
.left { .left {
width: 670px; width: 890px;
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;
.main { .main {
width: 670px; width: 870px;
height: 160px; height: 160px;
background-size: 100% 100%; background-size: 100% 100%;
margin-top: 10px; margin-top: 10px;
@ -66,7 +66,6 @@
grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
color: #ffffff; color: #ffffff;
padding: 10px 5px; padding: 10px 5px;
font-size: 12px;
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
} }
@ -76,8 +75,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: 0 auto;
margin: 0px auto;
text-align: center; text-align: center;
.fc1 { .fc1 {
@ -106,6 +104,7 @@
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;
.main { .main {
display: flex; display: flex;

16
src/pages/Container/Map/components/Content/IndexInfo/Btn/index.js Normal file
View File

@ -0,0 +1,16 @@
import img1 from "~/assets/images/public/bigScreen/btnbg.png";
import "./index.less";
function Btn() {
return (
<div className="index_info_btn" >
<div className="item" style={{ backgroundImage: `url(${img1})` }}>秦皇岛港</div>
<div className="item" style={{ backgroundImage: `url(${img1})` }}>沧州港</div>
<div className="item" style={{ backgroundImage: `url(${img1})` }}>曹实业</div>
<div className="item" style={{ backgroundImage: `url(${img1})` }}>曹煤炭</div>
</div>
);
}
export default Btn;

16
src/pages/Container/Map/components/Content/IndexInfo/Btn/index.less Normal file
View File

@ -0,0 +1,16 @@
.index_info_btn{
position: absolute;
top: 200px;
right: 450px;
.item{
width: 127px;
height: 43px;
color: #ffffff;
line-height: 43px;
text-align: center;
margin-top: 5px;
cursor: pointer;
}
}

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

@ -9,6 +9,7 @@ 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,6 +67,7 @@ function LeftScreen() {
return ( return (
<div className="left-container" > <div className="left-container" >
<div className="left-container_bg" style={{ backgroundImage: `url(${left})` }}></div>
<div className="block1"> <div className="block1">
<Title title="天气预报情况" /> <Title title="天气预报情况" />
<div className="main"> <div className="main">

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

@ -1,15 +1,29 @@
.index_info_container { .index_info_container {
.left-container { .left-container {
width: 360px; width: 400px;
position: absolute; position: absolute;
left: 20px; left: 20px;
top: 60px; top: 60px;
max-height: calc(100vh - 75px); max-height: calc(100vh - 75px);
.left-container_bg{
width: 600px;
height: 100%;
background-size: 100% 100%;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
.block1 { .block1 {
background: rgba(0, 41, 82, 0.68);
border-radius: 4px; border-radius: 4px;
border: 1px solid rgba(44, 105, 172, 0.6);
.main { .main {
display: flex; display: flex;
@ -55,7 +69,8 @@
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 {
@ -67,7 +82,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 {
@ -87,10 +102,10 @@
} }
.block2 { .block2 {
margin-top: 10px; margin-top: 20px;
background: rgba(0, 41, 82, 0.68);
border-radius: 4px; border-radius: 4px;
border: 1px solid rgba(44, 105, 172, 0.6);
.main { .main {
.warning { .warning {
@ -115,7 +130,7 @@
justify-content: space-between; justify-content: space-between;
.list { .list {
width: 48%; width: 49%;
background-size: 100% 100%; background-size: 100% 100%;
padding: 5px; padding: 5px;
color: #ffffff; color: #ffffff;
@ -133,7 +148,7 @@
.item { .item {
width: 50%; width: 50%;
margin: 2px 0; margin: 2px 0;
font-size: 12px;
.fcr { .fcr {
color: #f90102; color: #f90102;
@ -148,8 +163,9 @@
.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;
@ -161,7 +177,6 @@
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 {
@ -184,17 +199,15 @@
} }
.block3 { .block3 {
margin-top: 20px; margin-top: 0;
background: rgba(0, 41, 82, 0.68);
border-radius: 4px; border-radius: 4px;
border: 1px solid rgba(44, 105, 172, 0.6);
} }
.block4 { .block4 {
margin-top: 20px; margin-top: 20px;
background: rgba(0, 41, 82, 0.68);
border-radius: 4px; border-radius: 4px;
border: 1px solid rgba(44, 105, 172, 0.6);
.main { .main {
.table { .table {
@ -205,9 +218,9 @@
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 {
@ -219,7 +232,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;

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

@ -8,6 +8,7 @@ import img4 from "~/assets/images/public/bigScreen/ico8.png";
import img7 from "~/assets/images/public/bigScreen/ico9.png"; import img7 from "~/assets/images/public/bigScreen/ico9.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 rightbg 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 "./index.less"; import "./index.less";
@ -39,6 +40,7 @@ function RightScreen() {
return ( return (
<div className="right-container"> <div className="right-container">
<div className="right-container_bg" style={{ backgroundImage: `url(${rightbg})` }}></div>
<div className="block1"> <div className="block1">
<Title title="相关方申请审批管理" /> <Title title="相关方申请审批管理" />
<div className="main"> <div className="main">

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

@ -1,15 +1,26 @@
.index_info_container { .index_info_container {
.right-container_bg{
width: 600px;
height: 100%;
background-size: 100% 100%;
position: fixed;
top: 0;
right: 0;
z-index: -1;
transform: rotate(180deg);
}
.right-container { .right-container {
width: 360px; width: 400px;
position: absolute; position: absolute;
right: 20px; right: 20px;
top: 60px; top: 60px;
max-height: calc(100vh - 75px); max-height: calc(100vh - 75px);
.block1 { .block1 {
background: rgba(0, 41, 82, 0.68);
border-radius: 4px; border-radius: 4px;
border: 1px solid rgba(44, 105, 172, 0.6);
.main { .main {
display: flex; display: flex;
@ -24,9 +35,10 @@
grid-template-columns: 1fr 1fr 1.5fr 1fr; grid-template-columns: 1fr 1fr 1.5fr 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 {
@ -38,7 +50,7 @@
grid-template-columns: 1fr 1fr 1.5fr 1fr; grid-template-columns: 1fr 1fr 1.5fr 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;
@ -62,9 +74,9 @@
.block2 { .block2 {
margin-top: 10px; margin-top: 10px;
background: rgba(0, 41, 82, 0.68);
border-radius: 4px; border-radius: 4px;
border: 1px solid rgba(44, 105, 172, 0.6);
.main { .main {
display: flex; display: flex;
@ -84,7 +96,7 @@
.info { .info {
padding-left: 10px; padding-left: 10px;
color: #ffffff; color: #ffffff;
font-size: 12px;
p { p {
margin: 0; margin: 0;
@ -96,9 +108,9 @@
.block3 { .block3 {
margin-top: 20px; margin-top: 20px;
background: rgba(0, 41, 82, 0.68);
border-radius: 4px; border-radius: 4px;
border: 1px solid rgba(44, 105, 172, 0.6);
.main { .main {
display: flex; display: flex;
@ -111,7 +123,7 @@
background-size: 100% 100%; background-size: 100% 100%;
color: #ffffff; color: #ffffff;
padding: 5px 10px; padding: 5px 10px;
font-size: 12px;
margin-top: 10px; margin-top: 10px;
.title { .title {
@ -129,9 +141,9 @@
.block4 { .block4 {
margin-top: 20px; margin-top: 20px;
background: rgba(0, 41, 82, 0.68);
border-radius: 4px; border-radius: 4px;
border: 1px solid rgba(44, 105, 172, 0.6);
.main { .main {
.table { .table {
@ -142,9 +154,10 @@
grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-columns: 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 {
@ -156,7 +169,7 @@
grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-columns: 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;

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

@ -4,7 +4,7 @@
min-height: 200px; min-height: 200px;
position: absolute; position: absolute;
top: 100px; top: 100px;
left: 400px; left: 480px;
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);
@ -52,7 +52,7 @@
color: #4371af; color: #4371af;
line-height: 30px; line-height: 30px;
padding-left: 5px; padding-left: 5px;
font-size: 12px;
.input { .input {
border: none; border: none;
@ -76,7 +76,7 @@
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
font-size: 12px;
color: #ffffff; color: #ffffff;
padding: 5px; padding: 5px;
box-sizing: border-box; box-sizing: border-box;

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

@ -2,6 +2,7 @@ import Bottom from "./Bottom";
import LeftPanel from "./LeftPanel"; import LeftPanel from "./LeftPanel";
import RightPanel from "./RightPanel"; import RightPanel from "./RightPanel";
import Search from "./Search"; import Search from "./Search";
import Btn from "./Btn";
import "./index.less"; import "./index.less";
function IndexInfo() { function IndexInfo() {
@ -11,6 +12,7 @@ function IndexInfo() {
<RightPanel /> <RightPanel />
<Bottom /> <Bottom />
<Search /> <Search />
<Btn />
</div> </div>
); );
} }

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

@ -1,3 +1,5 @@
.index_info_container { .index_info_container {
overflow: hidden;
width: 100%;
height: 100%;
} }