diff --git a/src/pages/Container/Share/components/MiddlePanel/index.js b/src/pages/Container/Share/components/MiddlePanel/index.js index 53e4855..2559f63 100644 --- a/src/pages/Container/Share/components/MiddlePanel/index.js +++ b/src/pages/Container/Share/components/MiddlePanel/index.js @@ -2,6 +2,7 @@ import "./index.less"; import Title from "~/pages/Container/WhiteBranchOffice/components/Title"; import weather from "~/assets/images/public/weather/1.png"; +import img1 from "~/assets/images/public/white/titlebg1.png"; import {useState} from "react"; import SeamlessScroll from "zy-react-library/components/SeamlessScroll"; function WhiteShareMiddle() { @@ -29,12 +30,51 @@ function WhiteShareMiddle() { { unitName: "二公司", state: "未处置" ,preventiveMeasures:"远离大树、电线杆..." }, { unitName: "二公司", state: "未处置" ,preventiveMeasures:"远离大树、电线杆..." }, ]); + const [block4List, setBlock4List] = useState([ + { unitName: "二公司", safetySupervisionDepartment: "4" ,technicalDepartment:"3", engineeringDepartment:"2", businessDepartment:"1", accident:"0", humanResourcesDepartment:"0", score:"0" }, + { unitName: "二公司", safetySupervisionDepartment: "4" ,technicalDepartment:"3", engineeringDepartment:"2", businessDepartment:"1", accident:"0", humanResourcesDepartment:"0", score:"0" }, + { unitName: "二公司", safetySupervisionDepartment: "4" ,technicalDepartment:"3", engineeringDepartment:"2", businessDepartment:"1", accident:"0", humanResourcesDepartment:"0", score:"0" }, + { unitName: "二公司", safetySupervisionDepartment: "4" ,technicalDepartment:"3", engineeringDepartment:"2", businessDepartment:"1", accident:"0", humanResourcesDepartment:"0", score:"0" }, + { unitName: "二公司", safetySupervisionDepartment: "4" ,technicalDepartment:"3", engineeringDepartment:"2", businessDepartment:"1", accident:"0", humanResourcesDepartment:"0", score:"0" }, + { unitName: "二公司", safetySupervisionDepartment: "4" ,technicalDepartment:"3", engineeringDepartment:"2", businessDepartment:"1", accident:"0", humanResourcesDepartment:"0", score:"0" }, + ]); + const [block5List, setBlock5List] = useState([ + { unitName: "二公司", scores: "96" }, + { unitName: "二公司", scores: "96" }, + { unitName: "二公司", scores: "96" }, + { unitName: "二公司", scores: "96" }, + { unitName: "二公司", scores: "96" }, + { unitName: "二公司", scores: "96" }, + { unitName: "二公司", scores: "96" }, + { unitName: "二公司", scores: "96" }, + { unitName: "二公司", scores: "96" }, + ]) + const [block6List, setBlock6List] = useState([ + { domainName: "设备", scores: "96" }, + { domainName: "设备", scores: "96" }, + { domainName: "设备", scores: "96" }, + { domainName: "设备", scores: "96" }, + { domainName: "设备", scores: "96" }, + { domainName: "设备", scores: "96" }, + { domainName: "设备", scores: "96" }, + { domainName: "设备", scores: "96" }, + ]) + const [block7List, setBlock7List] = useState([ + { Name: "王丹", scores: "96" }, + { Name: "王丹", scores: "96" }, + { Name: "王丹", scores: "96" }, + { Name: "王丹", scores: "96" }, + { Name: "王丹", scores: "96" }, + + ]) + return (
<div className="block1_content"> + <div className="block1_content_con"> <div className="emergency_left"> <div className="top"> { @@ -71,7 +111,8 @@ function WhiteShareMiddle() { </div> </div> - <div className="emergency_right"> + + <div className="emergency_right"> <div className="weather"> <div className="title">秦皇岛市气象台发布大风橙色预警[工级/严重]</div> <div className="weather_main"> @@ -110,11 +151,121 @@ function WhiteShareMiddle() { </div> </div> </div> + </div> + <div className="block1_content_bottem"> + <div className="top"> + <div className="title"><img src={img1} alt=""/> 分子公司安全考评</div> + <div className="block1_content_bottem_tab"> + <div className="item active">年度</div> + <div className="item">季度</div> + </div> + </div> + <div className="block1_content_con"> + <div className="table"> + <div className="tr"> + <div className="th">单 位</div> + <div className="th">安监部扣分</div> + <div className="th">技设部扣分</div> + <div className="th">工程部扣分</div> + <div className="th">业务部扣分</div> + <div className="th">事故考核扣分</div> + <div className="th">人资部扣分</div> + <div className="th">得分</div> + </div> + <div className="scroll"> + <SeamlessScroll list={block4List} step={0.5}> + {block4List.map((item, index) => ( + <div key={index} className="tr"> + <div className="td">{item.unitName}</div> + <div className="td">{item.safetySupervisionDepartment}</div> + <div className="td">{item.technicalDepartment}</div> + <div className="td">{item.engineeringDepartment}</div> + <div className="td">{item.businessDepartment}</div> + <div className="td">{item.accident}</div> + <div className="td">{item.humanResourcesDepartment}</div> + <div className="td">{item.score}</div> + </div> + ))} + </SeamlessScroll> + </div> + </div> + </div> + </div> </div> + </div> + + <div className="block2"> + <Title title={"履职尽责"} /> + <div className="block2_content"> + <div className="item"> + <div className="title">分子公司排名</div> + <div className="block2_content_con"> + <div className="table"> + <div className="tr"> + <div className="th">公司名称</div> + <div className="th">分数</div> + </div> + <div className="scroll"> + <SeamlessScroll list={block5List} step={0.5}> + {block5List.map((item, index) => ( + <div key={index} className="tr"> + <div className="td">{item.unitName}</div> + <div className="td">{item.scores}</div> + </div> + ))} + </SeamlessScroll> + </div> + </div> + </div> + </div> + <div className="item"> + <div className="title">领域排名</div> + <div className="block2_content_con"> + <div className="table"> + <div className="tr"> + <div className="th">领域名称</div> + <div className="th">分数</div> + </div> + <div className="scroll"> + <SeamlessScroll list={block6List} step={0.5}> + {block6List.map((item, index) => ( + <div key={index} className="tr"> + <div className="td">{item.domainName}</div> + <div className="td">{item.scores}</div> + </div> + ))} + </SeamlessScroll> + </div> + </div> + </div> + </div> + <div className="item"> + <div className="title">人员排名</div> + <div className="block2_content_con"> + <div className="table"> + <div className="tr"> + <div className="th">姓名</div> + <div className="th">分数</div> + </div> + <div className="scroll"> + <SeamlessScroll list={block7List} step={0.5}> + {block7List.map((item, index) => ( + <div key={index} className="tr"> + <div className="td">{item.Name}</div> + <div className="td">{item.scores}</div> + </div> + ))} + </SeamlessScroll> + </div> + </div> + </div> + </div> </div> </div> + </div> + diff --git a/src/pages/Container/Share/components/MiddlePanel/index.less b/src/pages/Container/Share/components/MiddlePanel/index.less index 0df50cf..7ee5a8a 100644 --- a/src/pages/Container/Share/components/MiddlePanel/index.less +++ b/src/pages/Container/Share/components/MiddlePanel/index.less @@ -10,7 +10,11 @@ border: 2px solid transparent; border-image: linear-gradient(180deg, rgba(255,255,255,0), #ffffff) 1; border-radius: 2px; - display: flex; + + + .block1_content_con{ + display: flex; + .emergency_left{ width: 480px; .top{ @@ -58,10 +62,17 @@ } .emergency_right{ - margin-left: 10px; - padding-top: 5px; - padding-right: 5px; + padding: 5px; flex: 1; + margin: 5px; + border-width: 1px; + border-color: rgb(255, 255, 255); + border-style: solid; + border-radius: 2px; + background-color: rgba(197, 224, 246, 0.8); + box-shadow: inset 1px 1.732px 1px 0 rgba(124, 163, 189, 0.3); + + .weather{ .title{ color: #ff6600; @@ -75,7 +86,7 @@ color: #2b4977; font-size: 14px; font-weight: bold; - margin-top: 10px; + margin-top: 5px; .item{ width: 30%; text-align: center; @@ -88,14 +99,93 @@ .fcb{ color: #0c90ff; } - .table-style(112px, 1fr 1fr 2fr); + .table-style(105px, 1fr 1fr 2fr); } } } + } + .block1_content_bottem{ + width: 100%; + .top{ + width: 100%; + display: flex; + justify-content: space-between; + margin-bottom: 10px; + align-items: center; + .title{ + font-size: 15px; + font-weight: bold; + color: #3f4554; + margin-left: 5px; + } + .block1_content_bottem_tab{ + display: flex; + border-style: solid; + border-width: 1px; + border-color: rgb(163, 204, 250); + border-radius: 4px; + background-color: rgb(214, 236, 255); + margin-right: 5px; + align-items: center; + .item{ + padding: 0 10px; + &.active{ + background: #6291fa; + color: #ffffff; + } + &:hover{ + background: #6291fa; + color: #ffffff; + cursor: pointer; + } + } + + } + } + .block1_content_con{ + + border-width: 1px; + border-color: rgb(255, 255, 255); + border-style: solid; + border-radius: 4px; + background-color: rgba(234, 246, 255, 0.8); + margin: 5px; + padding: 5px; + .table-style(200px, 2fr 1.5fr 1fr 1fr 1fr 1fr 1fr 1fr) + } + } } } + +.block2{ + margin-top: 10px; + .block2_content{ + width: 100%; + background-image: -moz-linear-gradient( 90deg, rgb(218,233,250) 39%, rgb(226,239,255) 100%); + background-image: -webkit-linear-gradient( 90deg, rgb(218,233,250) 39%, rgb(226,239,255) 100%); + background-image: -ms-linear-gradient( 90deg, rgb(218,233,250) 39%, rgb(226,239,255) 100%); + border: 2px solid transparent; + border-image: linear-gradient(180deg, rgba(255,255,255,0), #ffffff) 1; + border-radius: 2px; + display: flex; + justify-content: space-between; + .table-style(165px, 1fr 1fr ); + padding: 5px; + + .item{ + width: 33%; + text-align: center; + .title{ + font-size: 16px; + font-weight: bold; + color: #3b445c; + } + } + } +} + } diff --git a/src/pages/Container/Share/components/RightPanel/index.js b/src/pages/Container/Share/components/RightPanel/index.js new file mode 100644 index 0000000..f38cf03 --- /dev/null +++ b/src/pages/Container/Share/components/RightPanel/index.js @@ -0,0 +1,187 @@ + +import "./index.less"; +import Title from "~/pages/Container/WhiteBranchOffice/components/Title"; +import img1 from "~/assets/images/public/white/img3.png"; +import bg1 from "~/assets/images/public/white/bg5.png"; +import bg2 from "~/assets/images/public/white/bg6.png"; +import {useState} from "react"; +import SeamlessScroll from "zy-react-library/components/SeamlessScroll"; + +function WhiteShareRight() { + const [block1List, setBlock1List] = useState([ + { name: "封闭区域公司数", num: "13" }, + { name: "封闭区域数", num: "75" }, + { name: "封闭区域当前人数", num: "58" }, + ]); + const [block2List, setBlock2List] = useState([ + { type: "生产类", numberOfUnits: "23" ,number:"33"}, + { type: "工程类", numberOfUnits: "21" ,number:"22"}, + { type: "劳务类", numberOfUnits: "2" ,number:"11"}, + { type: "卫生环保类", numberOfUnits: "22" ,number:"454"}, + { type: "物资管理类", numberOfUnits: "33" ,number:"65"}, + { type: "其他", numberOfUnits: "44" ,number:"43"}, + { type: "统计", numberOfUnits: "55" ,number:"44"}, + ]); + const [block3List, setBlock3List] = useState([ + { unitName: "生产类", numberOfItems: "23" ,number:"33" ,amount:"5698"}, + { unitName: "生产类", numberOfItems: "23" ,number:"33" ,amount:"5698"}, + { unitName: "生产类", numberOfItems: "23" ,number:"33" ,amount:"5698"}, + { unitName: "生产类", numberOfItems: "23" ,number:"33" ,amount:"5698"}, + + + ]); + return ( + <div className="white_share_right"> +<div className="block1"> + <Title title="四色四固定" extra="更多>" /> + <div className="white_share_right_block1_content"> + { + block1List.map((item, index) => ( + <div key={index} className="item"> + <img src={img1} alt="" /> + <div className="info"> + <div className="name">{item.name}</div> + <div className="num">{item.num}</div> + </div> + </div> + )) + } + </div> +</div> + <div className="block2"> + <Title title="封闭区域重点作业" extra="更多>" /> + <div className="block2_content"> + <div className="item" style={{ backgroundImage: `url(${bg1})` }}> + <div className="title">重点作业 <br/>情况统计</div> + <div className="content"> + <div className="wrap"> + <div className="name">单项发包作业</div> + <div className="num">56</div> + </div> + <div className="wrap"> + <div className="name">危险作业</div> + <div className="num">56</div> + </div> + <div className="wrap"> + <div className="name">三人及以上作业</div> + <div className="num">56</div> + </div> + <div className="wrap"> + <div className="name">四新作业</div> + <div className="num">56</div> + </div> + </div> + </div> + <div className="item" style={{ backgroundImage: `url(${bg2})` }}> + <div className="title">聚集场所<br/>情况统计</div> + <div className="content"> + <div className="wrap"> + <div className="name">聚集场所数</div> + <div className="num fc9">56</div> + </div> + <div className="wrap"> + <div className="name">聚集场所检查数</div> + <div className="num fc9">56</div> + </div> + <div className="wrap"> + <div className="name">检查率</div> + <div className="num fc9">56</div> + </div> + + </div> + </div> + </div> + </div> + + <div className="block3"> + <Title title="相关方单位情况统计" extra="更多>" /> + <div className="block3_content"> + <div className="item"> + <div className="title">一级相关方</div> + <div className="content_main"> + <div className="table"> + <div className="tr"> + <div className="th">类型</div> + <div className="th">单位数</div> + <div className="th">人数</div> + </div> + <div className="scroll"> + {block2List.map((item, index) => ( + <div key={index} className="tr"> + <div className="td">{item.type}</div> + <div className="td">{item.numberOfUnits}</div> + <div className="td">{item.number}</div> + </div> + ))} + </div> + </div> + </div> + </div> + + <div className="item"> + <div className="title">二级相关方</div> + <div className="content_main"> + <div className="table"> + <div className="tr"> + <div className="th">类型</div> + <div className="th">单位数</div> + <div className="th">人数</div> + </div> + <div className="scroll"> + {block2List.map((item, index) => ( + <div key={index} className="tr"> + <div className="td">{item.type}</div> + <div className="td">{item.numberOfUnits}</div> + <div className="td">{item.number}</div> + + </div> + ))} + </div> + </div> + </div> + </div> + </div> + </div> + +<div className="block4"> + <Title title="相关方处罚统计表" extra="更多>" /> + <div className="block4_content"> + <div className="block4_content_con"> + <div className="table"> + <div className="tr"> + <div className="th">相关方单位名称</div> + <div className="th">被处罚项目数</div> + <div className="th">处罚次数</div> + <div className="th">处罚金额</div> + + + + </div> + <div className="scroll1"> + <SeamlessScroll list={block3List} step={0.5}> + {block3List.map((item, index) => ( + <div key={index} className="tr"> + <div className="td">{item.unitName}</div> + <div className="td">{item.number}</div> + <div className="td">{item.numberOfItems}</div> + <div className="td">{item.amount}</div> + </div> + ))} + </SeamlessScroll> + </div> + <div className="tr fch"> + <div className="td">统计</div> + <div className="td">43</div> + <div className="td">33</div> + <div className="td">345</div> + </div> + </div> + </div> + + </div> +</div> + </div> + ); +} + +export default WhiteShareRight; diff --git a/src/pages/Container/Share/components/RightPanel/index.less b/src/pages/Container/Share/components/RightPanel/index.less new file mode 100644 index 0000000..9d9c15c --- /dev/null +++ b/src/pages/Container/Share/components/RightPanel/index.less @@ -0,0 +1,231 @@ +.white_share_right{ + width: 540px; + .block1{ + + + .white_share_right_block1_content{ + width: 100%; + background-image: -moz-linear-gradient( 90deg, rgb(218,233,250) 39%, rgb(226,239,255) 100%); + background-image: -webkit-linear-gradient( 90deg, rgb(218,233,250) 39%, rgb(226,239,255) 100%); + background-image: -ms-linear-gradient( 90deg, rgb(218,233,250) 39%, rgb(226,239,255) 100%); + border: 2px solid transparent; + border-image: linear-gradient(180deg, rgba(255,255,255,0), #ffffff) 1; + border-radius: 2px; + display: flex; + justify-content: space-between; + padding: 5px; + + .item{ + width: 33%; + display: flex; + font-weight: bold; + font-size: 14px; + color: #3d5882; + align-items: center; + img{ + width: 33px; + height: 40px; + } + + .info{ + margin-left: 10px; + .num{ + color: #347fd3; + font-size: 18px; + font-weight:normal; + } + } + } + } + } + + .block2{ + margin-top: 10px; + .block2_content{ + background-image: -moz-linear-gradient( 90deg, rgb(218,233,250) 39%, rgb(226,239,255) 100%); + background-image: -webkit-linear-gradient( 90deg, rgb(218,233,250) 39%, rgb(226,239,255) 100%); + background-image: -ms-linear-gradient( 90deg, rgb(218,233,250) 39%, rgb(226,239,255) 100%); + border: 2px solid transparent; + border-image: linear-gradient(180deg, rgba(255,255,255,0), #ffffff) 1; + border-radius: 2px; + display: flex; + justify-content: space-between; + padding: 5px; + flex-wrap: wrap; + .item{ + display: flex; + width: 100%; + align-items: center; + background-size: 100% 100%; + margin-bottom: 5px; + .title{ + width: 78px; + text-align: center; + font-weight: bold; + color: #3b576a; + } + .content{ + display: flex; + width: 440px; + flex-wrap: wrap; + justify-content: space-around; + + .wrap{ + text-align: center; + padding-top: 5px; + width: 25%; + .name{ + font-weight: bold; + color: #3b576a; + font-size: 12px; + } + .num{ + color: #347fd3; + font-size: 18px; + } + .fc9{ + color: #ff9000; + } + + } + } + + } + } + } + +.block3{ + margin-top: 10px; + + .block3_content{ + width: 100%; + background-image: -moz-linear-gradient( 90deg, rgb(218,233,250) 39%, rgb(226,239,255) 100%); + background-image: -webkit-linear-gradient( 90deg, rgb(218,233,250) 39%, rgb(226,239,255) 100%); + background-image: -ms-linear-gradient( 90deg, rgb(218,233,250) 39%, rgb(226,239,255) 100%); + border: 2px solid transparent; + border-image: linear-gradient(180deg, rgba(255,255,255,0), #ffffff) 1; + border-radius: 2px; + display: flex; + justify-content: space-between; + padding: 5px; + .item{ + width: 49.5%; + .title{ + width: 100%; + border-style: solid; + border-width: 1px; + border-color: rgb(255, 255, 255); + border-radius: 2px; + box-shadow: inset 0 1px 1px 0 rgba(49, 122, 202, 0.19); + font-weight: bold; + text-align: center; + color: #305683; + line-height: 30px; + background: #bcdffd; + } + .content_main{ + .table-style(200px, 1fr 1fr 1fr); + } + } + } +} + + .block4{ + margin-top: 10px; + .block4_content{ + width: 100%; + background-image: -moz-linear-gradient( 90deg, rgb(218,233,250) 39%, rgb(226,239,255) 100%); + background-image: -webkit-linear-gradient( 90deg, rgb(218,233,250) 39%, rgb(226,239,255) 100%); + background-image: -ms-linear-gradient( 90deg, rgb(218,233,250) 39%, rgb(226,239,255) 100%); + border: 2px solid transparent; + border-image: linear-gradient(180deg, rgba(255,255,255,0), #ffffff) 1; + border-radius: 2px; + display: flex; + justify-content: space-between; + padding: 5px; + + .block4_content_con{ + width: 100%; + .table-style(72px, 2fr 2fr 1.5fr 1.5fr); + + .fch{ + background: #e8ede1 !important; + } + } + + } + } + + +} + + +.table-style(@height, @grid-template-columns) { + .table { + border: 1px solid #fff; + + .scroll { + height: @height; + overflow-y: hidden; + + .tr { + &:nth-child(odd) { + background-color: transparent; + } + &:last-child { + background: #e8ede1; + } + } + } + .scroll1 { + height: @height; + overflow-y: hidden; + + .tr { + &:nth-child(odd) { + background-color: transparent; + } + + } + + } + + .tr{ + display: grid; + grid-template-columns: @grid-template-columns; + background-color: #C4E2F8; + + &:not(:last-child) { + border-bottom: 1px solid #fff; + } + + + .td, .th { + text-align: center; + font-size: 14px; + color: #3B445C; + border-right: 1px solid #fff; + height: 28px; + line-height: 28px; + + &:last-child { + border-right: none; + } + } + .fcb{ + color: #0c90ff; + } + + .th { + font-weight: bold; + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + } + + } +} + diff --git a/src/pages/Container/Share/index.js b/src/pages/Container/Share/index.js index a58252c..fd3201d 100644 --- a/src/pages/Container/Share/index.js +++ b/src/pages/Container/Share/index.js @@ -4,8 +4,14 @@ import "./index.less"; import Header from "~/pages/Container/Share/components/Header"; import Left from "~/pages/Container/Share/components/LeftPanel"; import Middle from "~/pages/Container/Share/components/MiddlePanel"; +import Right from "~/pages/Container/Share/components/RightPanel"; +import {useMount} from "ahooks"; +import autoFit from "autofit.js"; function WhiteShareOffice() { + useMount(() => { + autoFit.init({ dw: 1920, dh: 1080, el: ".white_branch_office", resize: true }); + }); return ( <div className="white_share_office" style={{ backgroundImage: `url(${bg})` }}> <Header /> @@ -16,6 +22,9 @@ function WhiteShareOffice() { <div className="middle"> <Middle/> </div> + <div className="right"> + <Right/> + </div> </div> </div> ); diff --git a/src/pages/Container/Share/index.less b/src/pages/Container/Share/index.less index a575903..b796385 100644 --- a/src/pages/Container/Share/index.less +++ b/src/pages/Container/Share/index.less @@ -6,6 +6,7 @@ .white_share_office_content{ width: 100%; display: flex; + justify-content: space-between; .left{ width: 500px; margin-left: 10px; @@ -14,6 +15,10 @@ width: 840px; margin-left: 10px; } + .right{ + flex: 1; + margin-left: 10px; + } } }