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 img1 from "~/assets/images/public/bigScreen/smalltitle.png";
import img2 from "~/assets/images/public/bigScreen/bg13.png"; import img2 from "~/assets/images/public/bigScreen/bg13.png";
import img3 from "~/assets/images/public/bigScreen/bg14.png"; import img3 from "~/assets/images/public/bigScreen/bg14.png";
import img4 from "~/assets/images/public/bigScreen/more1.png";
function BottomScreen() { function BottomScreen() {
return ( return (
<div className="bottom-container" > <div className="bottom-container_con">
<div className="left"> <div className="top_container">
<div className="title" style={{ backgroundImage: `url(${img1})` }}>分子公司考核情况</div> <div className="title">管理九项 <img src={img4} alt=""/></div>
<div className="main" style={{ backgroundImage: `url(${img2})` }}> <div className="con">
<div className="table"> <div className="item">安全管理台账</div>
<div className="head" > <div className="item active">双重预防管理</div>
<div>公司名称</div> <div className="item">相关方管理</div>
<div>检查任务完成情况</div> <div className="item">现场重点监管</div>
<div>安全会议召开情况</div> <div className="item">消防应急管理</div>
<div>重要事项传达情况</div> <div className="item">安全教育培训</div>
<div>专项任务完成情况</div> <div className="item">综合查询（同比、环比 )</div>
</div> <div className="item">综合考评管理</div>
<div className="table-container" > <div className="item">科技兴安</div>
<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>
</div> </div>
<div className="right"> <div className="bottom-container" >
<div className="title" style={{ backgroundImage: `url(${img1})` }}>视频巡屏</div> <div className="left">
<div className="main"> <div className="title" style={{ backgroundImage: `url(${img1})` }}>分子公司考核情况</div>
<div className="menu"> <div className="main" style={{ backgroundImage: `url(${img2})` }}>
<div className="list active">新益公司</div> <div className="table">
<div className="list">二公司</div> <div className="head" >
<div className="list">六公司</div> <div>公司名称</div>
<div className="list">七公司</div> <div>检查任务完成情况</div>
<div className="list">九公司</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>
<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> </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; width: 1120px;
height: 200px; height: 240px;
position: absolute; position: absolute;
bottom: 20px; bottom: 20px;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
display: flex; .top_container{
justify-content: space-between; width: 100%;
.left{ display: flex;
width: 670px; color: #ffffff;
font-size: 12px;
margin-bottom: 10px;
.title{ .title{
width: 360px; background: #074abe;
height: 30px;
background-size: 100% 100%;
padding-left: 20px;
color: #ffffff; color: #ffffff;
font-weight: bold; padding: 5px 10px;
border-radius: 2px;
} }
.main{ .con{
width: 670px; display: flex;
height: 160px; background: rgba(1,50,115,0.5);
background-size: 100% 100%; line-height: 30px;
margin-top: 10px; margin-left: 2px;
color: #ffffff;
.table{
width: 100%;
margin-top: 10px;
.head{ .item{
width: 100%; padding: 0 10px;
display: grid; &:hover{
grid-template-columns: 1fr 1fr 1fr 1fr 1fr ; cursor: pointer;
color: #ffffff; background: #011d41;
padding:10px 5px;
font-size: 12px;
text-align: center;
font-weight: bold;
} }
.table-container{ }
width: 100%; .active{
display: grid; background: #011d41;
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;
}
}
} }
} }
} }
.bottom-container{
.right{ display: flex;
width: 440px; justify-content: space-between;
.title{ .left{
width: 360px; width: 670px;
height: 30px; .title{
background-size: 100% 100%; width: 360px;
color: #ffffff; height: 30px;
font-weight: bold; background-size: 100% 100%;
padding-left: 20px; 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;
color: #ffffff; color: #ffffff;
text-align: center; font-weight: bold;
line-height: 30px; }
padding: 5px; .main{
width: 670px;
.list{ height: 160px;
background-size: 100% 100%;
margin-top: 10px;
color: #ffffff;
.table{
width: 100%; 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; border-radius: 5px;
background-color: rgba(18, 96, 181, 0.4); background-color: rgb(13, 56, 119);
box-shadow: 0 2px 1px 0 rgba(2, 32, 95, 0.4); box-shadow: inset 0px 2px 2px 0px rgba(35, 24, 21, 0.17);
margin-bottom: 5px; height: 180px;
&:hover{ 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; border-radius: 5px;
background-color: rgb(18, 96, 181); background-color: rgb(18, 96, 181);
box-shadow: 0px 2px 1px 0px rgba(2, 32, 95, 0.4); box-shadow: 0px 2px 1px 0px rgba(2, 32, 95, 0.4);
cursor: pointer; 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{ .video-container{
flex: 1; flex: 1;
margin-left: 10px; margin-left: 10px;
padding: 10px; padding: 10px;
}
} }
} }
} }
} }