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

首页

master
鲁洪霞 2026-01-09 16:02:59 +08:00
parent 61c27de07c
commit a642d76da6
2 changed files with 204 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
src/pages/Container/Bi/components/bottom/index.js
View File

@ -3,72 +3,88 @@ import "./index.less";
import img1 from "~/assets/images/public/bigScreen/smalltitle.png";
import img2 from "~/assets/images/public/bigScreen/bg13.png";
import img3 from "~/assets/images/public/bigScreen/bg14.png";
import img4 from "~/assets/images/public/bigScreen/more1.png";
function BottomScreen() {
return (
<div className="bottom-container" >
<div className="left">
<div className="title" style={{ backgroundImage: `url(${img1})` }}>分子公司考核情况</div>
<div className="main" style={{ backgroundImage: `url(${img2})` }}>
<div className="table">
<div className="head" >
<div>公司名称</div>
<div>检查任务完成情况</div>
<div>安全会议召开情况</div>
<div>重要事项传达情况</div>
<div>专项任务完成情况</div>
</div>
<div className="table-container" >
<div className="table-item">新益公司</div>
<div className="table-item">23/26</div>
<div className="table-item">23/26</div>
<div className="table-item">23/26</div>
<div className="table-item">23/26</div>
</div>
<div className="table-container" >
<div className="table-item">新益公司</div>
<div className="table-item">23/26</div>
<div className="table-item">23/26</div>
<div className="table-item">23/26</div>
<div className="table-item">23/26</div>
</div>
<div className="table-container" >
<div className="table-item">新益公司</div>
<div className="table-item">23/26</div>
<div className="table-item">23/26</div>
<div className="table-item">23/26</div>
<div className="table-item">23/26</div>
</div>
<div className="table-container" >
<div className="table-item">新益公司</div>
<div className="table-item">23/26</div>
<div className="table-item">23/26</div>
<div className="table-item">23/26</div>
<div className="table-item">23/26</div>
</div>
</div>
<div className="bottom-container_con">
<div className="top_container">
<div className="title">管理九项 <img src={img4} alt=""/></div>
<div className="con">
<div className="item">安全管理台账</div>
<div className="item active">双重预防管理</div>
<div className="item">相关方管理</div>
<div className="item">现场重点监管</div>
<div className="item">消防应急管理</div>
<div className="item">安全教育培训</div>
<div className="item">综合查询（同比、环比 )</div>
<div className="item">综合考评管理</div>
<div className="item">科技兴安</div>
</div>
</div>
<div className="right">
<div className="title" style={{ backgroundImage: `url(${img1})` }}>视频巡屏</div>
<div className="main">
<div className="menu">
<div className="list active">新益公司</div>
<div className="list">二公司</div>
<div className="list">六公司</div>
<div className="list">七公司</div>
<div className="list">九公司</div>
<div className="bottom-container" >
<div className="left">
<div className="title" style={{ backgroundImage: `url(${img1})` }}>分子公司考核情况</div>
<div className="main" style={{ backgroundImage: `url(${img2})` }}>
<div className="table">
<div className="head" >
<div>公司名称</div>
<div>检查任务完成情况</div>
<div>安全会议召开情况</div>
<div>重要事项传达情况</div>
<div>专项任务完成情况</div>
</div>
<div className="table-container" >
<div className="table-item">新益公司</div>
<div className="table-item">23/26</div>
<div className="table-item">23/26</div>
<div className="table-item">23/26</div>
<div className="table-item">23/26</div>
</div>
<div className="table-container" >
<div className="table-item">新益公司</div>
<div className="table-item">23/26</div>
<div className="table-item">23/26</div>
<div className="table-item">23/26</div>
<div className="table-item">23/26</div>
</div>
<div className="table-container" >
<div className="table-item">新益公司</div>
<div className="table-item">23/26</div>
<div className="table-item">23/26</div>
<div className="table-item">23/26</div>
<div className="table-item">23/26</div>
</div>
<div className="table-container" >
<div className="table-item">新益公司</div>
<div className="table-item">23/26</div>
<div className="table-item">23/26</div>
<div className="table-item">23/26</div>
<div className="table-item">23/26</div>
</div>
</div>
</div>
<div className="video-container" style={{ backgroundImage: `url(${img3})` }}>
这里是视频
</div>
<div className="right">
<div className="title" style={{ backgroundImage: `url(${img1})` }}>视频巡屏</div>
<div className="main">
<div className="menu">
<div className="list active">新益公司</div>
<div className="list">二公司</div>
<div className="list">六公司</div>
<div className="list">七公司</div>
<div className="list">九公司</div>
</div>
<div className="video-container" style={{ backgroundImage: `url(${img3})` }}>
这里是视频
</div>
</div>
</div>
</div>
</div>
</div>
);
}

230
src/pages/Container/Bi/components/bottom/index.less
View File

@ -1,125 +1,161 @@
.bottom-container{
.bottom-container_con{
width: 1120px;
height: 200px;
height: 240px;
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: space-between;
.left{
width: 670px;
.top_container{
width: 100%;
display: flex;
color: #ffffff;
font-size: 12px;
margin-bottom: 10px;
.title{
width: 360px;
height: 30px;
background-size: 100% 100%;
padding-left: 20px;
background: #074abe;
color: #ffffff;
font-weight: bold;
padding: 5px 10px;
border-radius: 2px;
}
.main{
width: 670px;
height: 160px;
background-size: 100% 100%;
margin-top: 10px;
color: #ffffff;
.table{
width: 100%;
margin-top: 10px;
.con{
display: flex;
background: rgba(1,50,115,0.5);
line-height: 30px;
margin-left: 2px;
.head{
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr ;
color: #ffffff;
padding:10px 5px;
font-size: 12px;
text-align: center;
font-weight: bold;
.item{
padding: 0 10px;
&:hover{
cursor: pointer;
background: #011d41;
}
.table-container{
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr ;
color: #ffffff;
padding: 5px;
font-size: 12px;
margin: 0px auto;
text-align: center;
.fc1{
color: #0c90ff;
}
.fc2{
color: #62b13f;
}
.fc3{
color: #ffa105;
}
&:hover{
background-color: rgba(14,197,208,0.1);
box-shadow: 0 0 1px #00e7ff;
}
}
}
.active{
background: #011d41;
}
}
}
.bottom-container{
.right{
width: 440px;
.title{
width: 360px;
height: 30px;
background-size: 100% 100%;
color: #ffffff;
font-weight: bold;
padding-left: 20px;
}
.main{
display: flex;
justify-content: space-between;
margin-top: 10px;
.menu{
width: 120px;
border-radius: 5px;
background-color: rgb(13, 56, 119);
box-shadow: inset 0px 2px 2px 0px rgba(35, 24, 21, 0.17);
height: 180px;
display: flex;
justify-content: space-between;
.left{
width: 670px;
.title{
width: 360px;
height: 30px;
background-size: 100% 100%;
padding-left: 20px;
color: #ffffff;
text-align: center;
line-height: 30px;
padding: 5px;
.list{
font-weight: bold;
}
.main{
width: 670px;
height: 160px;
background-size: 100% 100%;
margin-top: 10px;
color: #ffffff;
.table{
width: 100%;
margin-top: 10px;
.head{
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr ;
color: #ffffff;
padding:10px 5px;
font-size: 12px;
text-align: center;
font-weight: bold;
}
.table-container{
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr ;
color: #ffffff;
padding: 5px;
font-size: 12px;
margin: 0px auto;
text-align: center;
.fc1{
color: #0c90ff;
}
.fc2{
color: #62b13f;
}
.fc3{
color: #ffa105;
}
&:hover{
background-color: rgba(14,197,208,0.1);
box-shadow: 0 0 1px #00e7ff;
}
}
}
}
}
.right{
width: 440px;
.title{
width: 360px;
height: 30px;
background-size: 100% 100%;
color: #ffffff;
font-weight: bold;
padding-left: 20px;
}
.main{
display: flex;
justify-content: space-between;
margin-top: 10px;
.menu{
width: 120px;
border-radius: 5px;
background-color: rgba(18, 96, 181, 0.4);
box-shadow: 0 2px 1px 0 rgba(2, 32, 95, 0.4);
margin-bottom: 5px;
&:hover{
background-color: rgb(13, 56, 119);
box-shadow: inset 0px 2px 2px 0px rgba(35, 24, 21, 0.17);
height: 180px;
color: #ffffff;
text-align: center;
line-height: 30px;
padding: 5px;
.list{
width: 100%;
border-radius: 5px;
background-color: rgba(18, 96, 181, 0.4);
box-shadow: 0 2px 1px 0 rgba(2, 32, 95, 0.4);
margin-bottom: 5px;
&:hover{
border-radius: 5px;
background-color: rgb(18, 96, 181);
box-shadow: 0px 2px 1px 0px rgba(2, 32, 95, 0.4);
cursor: pointer;
}
}
.active{
border-radius: 5px;
background-color: rgb(18, 96, 181);
box-shadow: 0px 2px 1px 0px rgba(2, 32, 95, 0.4);
cursor: pointer;
}
}
.active{
border-radius: 5px;
background-color: rgb(18, 96, 181);
box-shadow: 0px 2px 1px 0px rgba(2, 32, 95, 0.4);
cursor: pointer;
}
}
.video-container{
flex: 1;
margin-left: 10px;
padding: 10px;
}
.video-container{
flex: 1;
margin-left: 10px;
padding: 10px;
}
}
}
}
}