diff --git a/src/assets/images/map_bi/content/bg10.png b/src/assets/images/map_bi/content/bg10.png new file mode 100644 index 0000000..a3ab0a0 Binary files /dev/null and b/src/assets/images/map_bi/content/bg10.png differ diff --git a/src/assets/images/map_bi/content/bg9.png b/src/assets/images/map_bi/content/bg9.png new file mode 100644 index 0000000..06a05ed Binary files /dev/null and b/src/assets/images/map_bi/content/bg9.png differ diff --git a/src/assets/images/map_bi/content/ico4.png b/src/assets/images/map_bi/content/ico4.png new file mode 100644 index 0000000..1b70a5f Binary files /dev/null and b/src/assets/images/map_bi/content/ico4.png differ diff --git a/src/assets/images/map_bi/content/ico5.png b/src/assets/images/map_bi/content/ico5.png new file mode 100644 index 0000000..90e2abb Binary files /dev/null and b/src/assets/images/map_bi/content/ico5.png differ diff --git a/src/assets/images/map_bi/content/ico6.png b/src/assets/images/map_bi/content/ico6.png new file mode 100644 index 0000000..d3ed23f Binary files /dev/null and b/src/assets/images/map_bi/content/ico6.png differ diff --git a/src/assets/images/map_bi/content/img.png b/src/assets/images/map_bi/content/img.png new file mode 100644 index 0000000..56d8c24 Binary files /dev/null and b/src/assets/images/map_bi/content/img.png differ diff --git a/src/pages/Container/Map/components/Content/branchOffice/WeiXian/index.js b/src/pages/Container/Map/components/Content/branchOffice/WeiXian/index.js index 89b75f4..b8c5f1a 100644 --- a/src/pages/Container/Map/components/Content/branchOffice/WeiXian/index.js +++ b/src/pages/Container/Map/components/Content/branchOffice/WeiXian/index.js @@ -1,8 +1,160 @@ +import { useState } from "react"; +import CountUp from "react-countup"; +import SeamlessScroll from "zy-react-library/components/SeamlessScroll"; +import bg1 from "~/assets/images/map_bi/content/bg9.png"; +import bg2 from "~/assets/images/map_bi/content/bg10.png"; +import icon1 from "~/assets/images/map_bi/content/ico4.png"; +import icon2 from "~/assets/images/map_bi/content/ico5.png"; +import icon3 from "~/assets/images/map_bi/content/ico6.png"; +import Title from "~/pages/Container/Map/components/Content/branchOffice/Title"; import "./index.less"; function WeiXian() { + const [block1List, setBlock1List] = useState([ + { title: "四新作业", count1: 123, count2: 123, icon: icon1 }, + { title: "危险作业", count1: 123, count2: 123, icon: icon2 }, + { title: "三人及以上作业", count1: 123, count2: 123, icon: icon3 }, + ]); + const [block2List, setBlock2List] = useState([ + { title: "四新
作业", count1: 123, count2: 123, count3: 123 }, + { title: "危险
作业", count1: 123, count2: 123, count3: 123 }, + { title: "三人及
以上作业", count1: 123, count2: 123, count3: 123 }, + ]); + const [block3List, setBlock3List] = useState([ + { department: "技术部", newWork: 15, dangerousWork: 22, threeOrMoreWork: 18 }, + { department: "生产部", newWork: 12, dangerousWork: 28, threeOrMoreWork: 25 }, + { department: "安全部", newWork: 8, dangerousWork: 35, threeOrMoreWork: 12 }, + { department: "质检部", newWork: 10, dangerousWork: 15, threeOrMoreWork: 20 }, + { department: "设备部", newWork: 18, dangerousWork: 30, threeOrMoreWork: 22 }, + { department: "维修部", newWork: 14, dangerousWork: 25, threeOrMoreWork: 16 }, + { department: "仓储部", newWork: 6, dangerousWork: 12, threeOrMoreWork: 14 }, + { department: "物流部", newWork: 9, dangerousWork: 18, threeOrMoreWork: 19 }, + { department: "人事部", newWork: 3, dangerousWork: 5, threeOrMoreWork: 8 }, + { department: "财务部", newWork: 2, dangerousWork: 3, threeOrMoreWork: 5 }, + ]); + const [block4List, setBlock4List] = useState([ + { dangerousWorkCategory: "高空作业", workCount: 25, workStatusCount: 18, personnelCount: 45 }, + { dangerousWorkCategory: "动火作业", workCount: 32, workStatusCount: 28, personnelCount: 68 }, + { dangerousWorkCategory: "受限空间作业", workCount: 18, workStatusCount: 15, personnelCount: 32 }, + { dangerousWorkCategory: "临时用电作业", workCount: 42, workStatusCount: 38, personnelCount: 56 }, + { dangerousWorkCategory: "吊装作业", workCount: 21, workStatusCount: 19, personnelCount: 35 }, + { dangerousWorkCategory: "挖掘作业", workCount: 15, workStatusCount: 12, personnelCount: 28 }, + { dangerousWorkCategory: "爆破作业", workCount: 8, workStatusCount: 6, personnelCount: 18 }, + { dangerousWorkCategory: "带压作业", workCount: 12, workStatusCount: 10, personnelCount: 22 }, + { dangerousWorkCategory: "断路作业", workCount: 9, workStatusCount: 7, personnelCount: 15 }, + { dangerousWorkCategory: "其他危险作业", workCount: 16, workStatusCount: 14, personnelCount: 26 }, + ]); + return ( -
1
+
+
+ + <div className="options"> + <div className="items"> + {block1List.map((item, index) => ( + <div className="item" key={index}> + <div className="title">{item.title}</div> + <div className="img"> + <img src={item.icon} alt="" /> + </div> + <div className="info"> + <span>当前作业数：</span> + <CountUp end={+item.count1}></CountUp> + </div> + <div className="info"> + <span>申请数：</span> + <CountUp end={+item.count2}></CountUp> + </div> + </div> + ))} + </div> + </div> + </div> + <div className="block2"> + <Title title="重点作业" /> + <div className="options"> + <div className="items"> + { + block2List.map((item, index) => ( + <div className="item" key={index} style={{ backgroundImage: `url(${index % 2 === 0 ? bg1 : bg2})` }}> + <div className="title" dangerouslySetInnerHTML={{ __html: item.title }} /> + <div className="info"> + <div> + <div className="label">当前作业数</div> + <div className="value"> + <CountUp end={+item.count1}></CountUp> + </div> + </div> + <div> + <div className="label">作业中</div> + <div className="value"> + <CountUp end={+item.count2}></CountUp> + </div> + </div> + <div> + <div className="label">已归档</div> + <div className="value"> + <CountUp end={+item.count3}></CountUp> + </div> + </div> + </div> + </div> + )) + } + </div> + </div> + </div> + <div className="block3"> + <Title title="部门作业统计" /> + <div className="options"> + <div className="table"> + <div className="tr"> + <div className="td">部门名称</div> + <div className="td">四新作业</div> + <div className="td">危险作业</div> + <div className="td">三人以上作业数</div> + </div> + <div className="scroll"> + <SeamlessScroll list={block3List} step={0.5}> + {block3List.map((item, index) => ( + <div key={index} className="tr"> + <div className="td">{item.department}</div> + <div className="td">{item.newWork}</div> + <div className="td">{item.dangerousWork}</div> + <div className="td">{item.threeOrMoreWork}</div> + </div> + ))} + </SeamlessScroll> + </div> + </div> + </div> + </div> + <div className="block4"> + <Title title="危险作业数据统计" /> + <div className="options"> + <div className="table"> + <div className="tr"> + <div className="td">危险作业类别</div> + <div className="td">作业数</div> + <div className="td">作业状态数</div> + <div className="td">参与人员数</div> + </div> + <div className="scroll"> + <SeamlessScroll list={block4List} step={0.5}> + {block4List.map((item, index) => ( + <div key={index} className="tr"> + <div className="td">{item.dangerousWorkCategory}</div> + <div className="td">{item.workCount}</div> + <div className="td">{item.workStatusCount}</div> + <div className="td">{item.personnelCount}</div> + </div> + ))} + </SeamlessScroll> + </div> + </div> + </div> + </div> + </div> ); } diff --git a/src/pages/Container/Map/components/Content/branchOffice/WeiXian/index.less b/src/pages/Container/Map/components/Content/branchOffice/WeiXian/index.less index 9b8b496..311c8fb 100644 --- a/src/pages/Container/Map/components/Content/branchOffice/WeiXian/index.less +++ b/src/pages/Container/Map/components/Content/branchOffice/WeiXian/index.less @@ -1,3 +1,193 @@ .branch_office_weixian { + .block1 { + background-color: rgba(12, 28, 88, 0.4); + .options { + padding: 10px 15px; + border: 1px solid; + border-image: linear-gradient(to bottom, + rgba(58, 122, 149, 0), + rgba(58, 122, 149, 1)) 1; + border-top: none; + + .items { + display: flex; + align-items: center; + justify-content: space-between; + color: #fff; + + .item { + .title { + font-weight: bold; + font-size: 14px; + text-align: center; + } + + .img { + margin-top: 13px; + text-align: center; + + img { + width: 42px; + height: 48px; + } + } + + .info { + margin-top: 5px; + font-size: 12px; + } + } + } + } + } + + .block2 { + background-color: rgba(12, 28, 88, 0.4); + margin-top: 10px; + + .options { + padding: 10px 15px; + border: 1px solid; + border-image: linear-gradient(to bottom, + rgba(58, 122, 149, 0), + rgba(58, 122, 149, 1)) 1; + border-top: none; + + .items { + .item { + color: #fff; + display: flex; + align-items: center; + padding: 12px 0; + background-size: 100% 100%; + background-repeat: no-repeat; + margin-top: 5px; + + &:first-child { + margin-top: 0; + } + + .title { + margin-left: 15px; + border: 1px solid #167CE4; + border-radius: 4px; + width: 65px; + height: 50px; + text-align: center; + display: flex; + align-items: center; + justify-content: center; + font-weight: bold; + font-size: 14px; + } + + .info { + margin: 0 30px; + flex: 1; + display: flex; + align-items: center; + justify-content: space-between; + text-align: center; + + .label { + font-weight: bold; + } + + .value { + font-size: 16px; + } + + & > div { + &:nth-child(1) .value { + color: #00aeff; + } + + &:nth-child(2) .value { + color: #ffa800; + } + + &:nth-child(3) .value { + color: #74cb3f; + } + } + } + } + } + } + } + + .block3 { + background-color: rgba(12, 28, 88, 0.4); + margin-top: 10px; + + .options { + padding: 10px 15px; + border: 1px solid; + border-image: linear-gradient(to bottom, + rgba(58, 122, 149, 0), + rgba(58, 122, 149, 1)) 1; + border-top: none; + + .table { + margin-top: 5px; + + .scroll { + height: 145px; + overflow-y: hidden; + } + + .tr { + margin-top: 5px; + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + background-color: rgba(17, 51, 112, 0.8); + + .td { + text-align: center; + font-size: 12px; + color: #fff; + padding: 5px; + } + } + } + } + } + + .block4 { + background-color: rgba(12, 28, 88, 0.4); + margin-top: 10px; + + .options { + padding: 10px 15px; + border: 1px solid; + border-image: linear-gradient(to bottom, + rgba(58, 122, 149, 0), + rgba(58, 122, 149, 1)) 1; + border-top: none; + + .table { + margin-top: 5px; + + .scroll { + height: 145px; + overflow-y: hidden; + } + + .tr { + margin-top: 5px; + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + background-color: rgba(17, 51, 112, 0.8); + + .td { + text-align: center; + font-size: 12px; + color: #fff; + padding: 5px; + } + } + } + } + } }