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

地图和BI页

master
LiuJiaNan 2026-01-16 17:18:09 +08:00
parent 6ac4ffc4e8
commit e2b3969a70
36 changed files with 1615 additions and 1355 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,7 +3,7 @@
width: 1350px;
height: 240px;
position: absolute;
bottom: 35px;
bottom: -1050px;
left: 50%;
transform: translateX(-50%);

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

@ -1,14 +1,27 @@
import img1 from "~/assets/images/public/bigScreen/btnbg.png";
import "./index.less";
function Btn() {
function Btn(props) {
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 className="index_info_btn">
<div
className="item"
style={{ backgroundImage: `url(${img1})` }}
onClick={() => {
props.history.push("./white/branchOffice");
}}
>
分公司大屏
</div>
<div
className="item"
style={{ backgroundImage: `url(${img1})` }}
onClick={() => {
props.history.push("./white/share");
}}
>
监管端大屏
</div>
</div>
);
}

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

@ -1,9 +1,9 @@
.index_info_btn{
.index_info_btn {
position: absolute;
top: 200px;
right: 450px;
.item{
.item {
width: 127px;
height: 43px;
color: #ffffff;

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

@ -1,18 +1,18 @@
import Bottom from "./Bottom";
import Btn from "./Btn";
import LeftPanel from "./LeftPanel";
import RightPanel from "./RightPanel";
import Search from "./Search";
import Btn from "./Btn";
import "./index.less";
function IndexInfo() {
function IndexInfo(props) {
return (
<div className="index_info_container">
<LeftPanel />
<RightPanel />
<Bottom />
<Search />
<Btn />
<Btn history={props.history} />
</div>
);
}

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

@ -29,34 +29,44 @@ import { Context } from "~/pages/Container/Map/js/context";
import { useContentAnimation } from "./useContentAnimation";
import "./index.less";
function Content() {
function Content(props) {
const { currentPort, currentBranchOffice, pureMap, bottomUtilsCurrentIndex } = useContext(Context);
const [collapseLeft, setCollapseLeft] = useState(false);
const [collapseRight, setCollapseRight] = useState(false);
const {
controls: indexInfoControls,
isVisible: isIndexInfoVisible,
} = useContentAnimation({
currentContent: { currentPort, currentBranchOffice },
type: "index",
});
const {
controls: leftControls,
displayedContent: leftDisplayedContent,
isVisible: isLeftVisible,
handleCollapse: handleLeftCollapse,
} = useContentAnimation(
{ currentPort, currentBranchOffice, bottomUtilsCurrentIndex },
collapseLeft,
"left",
pureMap,
);
} = useContentAnimation({
currentContent: { currentPort, currentBranchOffice, bottomUtilsCurrentIndex },
isCollapsed: collapseLeft,
side: "left",
isPureMap: pureMap,
type: "panel",
});
const {
controls: rightControls,
displayedContent: rightDisplayedContent,
isVisible: isRightVisible,
handleCollapse: handleRightCollapse,
} = useContentAnimation(
{ currentBranchOffice, bottomUtilsCurrentIndex },
collapseRight,
"right",
pureMap,
);
} = useContentAnimation({
currentContent: { currentBranchOffice, bottomUtilsCurrentIndex },
isCollapsed: collapseRight,
side: "right",
isPureMap: pureMap,
type: "panel",
});
const renderPortContent = () => {
const bottomUtilsCurrentType = (leftDisplayedContent.bottomUtilsCurrentIndex !== -1 && portUtilsList[leftDisplayedContent.bottomUtilsCurrentIndex])
@ -115,7 +125,11 @@ function Content() {
const renderContent = () => {
return (
<>
{!leftDisplayedContent.currentPort && (<IndexInfo />)}
{isIndexInfoVisible && (
<motion.div animate={indexInfoControls} className="map_content_container__indexinfo">
<IndexInfo history={props.history} />
</motion.div>
)}
{isLeftVisible && (
<motion.div
animate={leftControls}

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

@ -26,6 +26,11 @@
// 执行循环
.loop();
&__indexinfo {
position: relative;
opacity: 0;
}
&__content {
width: 430px;
position: absolute;
@ -33,13 +38,11 @@
&.port {
top: 75px;
max-height: calc(100vh - 75px);
opacity: 0;
}
&.branch_office {
top: 70px;
max-height: calc(100vh - 70px);
opacity: 0;
}
}

169
src/pages/Container/Map/components/Content/useContentAnimation.js
View File

@ -2,53 +2,145 @@ import { useAnimation } from "motion/react";
import { useEffect, useRef, useState } from "react";
/**
* 内容切换动画 Hook
* 内容动画 Hook（统一处理 IndexInfo 和面板动画）
*
* 功能说明：
* 1. 管理内容面板的显示/隐藏状态
* 2. 处理内容切换时的动画效果（离开 + 进入）
* 3. 处理折叠/展开时的动画效果
* 4. 处理纯地图模式下的动画效果
* 1. 通过 type 参数区分动画类型："index"（IndexInfo 缩放动画）或 "panel"（面板滑动动画）
* 2. IndexInfo 类型：管理首页内容的显示/隐藏，使用缩放动画
* 3. Panel 类型：管理内容面板的显示/隐藏，使用滑动动画，支持折叠/展开
*
* 优先级：pureMap > 折叠状态 > 内容变化
*
* @param {object} currentContent - 当前要显示的内容状态（包含 currentPort、currentBranchOffice、bottomUtilsCurrentIndex 等）
* @param {boolean} isCollapsed - 当前是否处于折叠状态
* @param {string} side - 'left' 或 'right'，控制动画方向
* @param {boolean} isPureMap - 是否为纯地图模式
* @param {object} params - 参数对象
* @param {object} params.currentContent - 当前要显示的内容状态（包含 currentPort、currentBranchOffice、bottomUtilsCurrentIndex 等）
* @param {boolean} params.isCollapsed - 当前是否处于折叠状态（仅 panel 类型）
* @param {string} params.side - 'left' 或 'right'，控制动画方向（仅 panel 类型）
* @param {boolean} params.isPureMap - 是否为纯地图模式（仅 panel 类型）
* @param {string} params.type - 动画类型："index" 或 "panel"（默认 "panel"）
* @returns {object} 返回包含以下属性的对象：
* - controls: motion 动画控制器
* - displayedContent: 延迟显示的内容状态（用于动画过渡）
* - displayedContent: 延迟显示的内容状态（仅 panel 类型）
* - isVisible: 元素可见性状态
* - handleCollapse: 处理折叠/展开的函数
* - handleCollapse: 处理折叠/展开的函数（仅 panel 类型）
*/
export function useContentAnimation(currentContent, isCollapsed, side = "left", isPureMap = false) {
export function useContentAnimation({
currentContent,
isCollapsed = false,
side = "left",
isPureMap = false,
type = "panel",
}) {
// ==================== 状态管理 ====================
// motion 动画控制器，用于控制元素的动画
const controls = useAnimation();
// 标记是否是首次渲染（首次渲染不执行离开动画，直接进入）
const isLeftFirstRender = useRef(true);
// 标记当前是否正在执行动画（防止动画冲突）
const isAnimating = useRef(false);
// 延迟显示的内容状态
// 作用：在内容切换时，先显示旧内容，动画完成后再更新为新内容
const [displayedContent, setDisplayedContent] = useState(currentContent);
// 元素可见性状态
// false: 元素被隐藏（折叠或纯地图模式）
// true: 元素可见（非折叠、非纯地图模式）
const [isVisible, setIsVisible] = useState(true);
// ==================== 辅助函数 ====================
// 标记当前是否正在执行动画（防止动画冲突）
const isAnimating = useRef(false);
/**
* 计算动画的初始位置
* @returns {number} 初始 X 轴位移值（负数表示在左侧，正数表示在右侧）
*/
// 标记是否是首次渲染（首次渲染不执行离开动画，直接进入）
const isFirstRender = useRef(true);
// 延迟显示的内容状态（仅 panel 类型使用）
// 作用：在内容切换时，先显示旧内容，动画完成后再更新为新内容
const [displayedContent, setDisplayedContent] = useState(type === "index" ? {} : currentContent);
// ==================== IndexInfo 类型的缩放动画逻辑 ====================
useEffect(() => {
// 仅处理 index 类型
if (type !== "index") {
return;
}
// 判断是否应该显示 IndexInfo（没有选择任何港口或分公司时）
const shouldShowIndexInfo = !currentContent.currentPort && !currentContent.currentBranchOffice;
// ==================== 场景 1：应该显示 IndexInfo ====================
if (shouldShowIndexInfo) {
// ----- 情况 A：首次渲染 -----
if (isFirstRender.current) {
// 1. 设置元素到初始缩小状态
controls.set({
scale: 0.8, // 缩小到 80%
opacity: 0, // 透明
});
// 2. 显示元素
setIsVisible(true);
// 3. 执行放大进入动画（从小到大缩放）
requestAnimationFrame(() => {
controls.start({
scale: 1, // 放大到正常大小
opacity: 1, // 淡入
transition: { duration: 0.5, ease: "easeOut" },
});
});
// 4. 标记首次渲染完成
isFirstRender.current = false;
}
// ----- 情况 B：从其他内容切换回来：放大进入（带延迟，等待其他内容离开动画完成） -----
else if (!isVisible && !isAnimating.current) {
// 标记开始执行动画（防止动画冲突）
isAnimating.current = true;
// 1. 显示元素
setIsVisible(true);
// 2. 执行放大进入动画
requestAnimationFrame(() => {
// 设置元素到初始缩小状态
controls.set({
scale: 0.8,
opacity: 0,
});
// 然后触发放大进入动画（带 0.3s 延迟，等待其他内容离开）
requestAnimationFrame(() => {
controls.start({
scale: 1,
opacity: 1,
transition: { duration: 0.5, ease: "easeOut", delay: 0.3 },
}).then(() => {
// 动画完成标记
isAnimating.current = false;
});
});
});
}
}
// ==================== 场景 2：不应该显示 IndexInfo（选择了港口或分公司）====================
else if (isVisible && !isAnimating.current) {
// 标记开始执行动画（防止动画冲突）
isAnimating.current = true;
// 执行缩小离开动画
controls.start({
scale: 0.8, // 缩小到 80%
opacity: 0, // 淡出
transition: { duration: 0.3, ease: "easeIn" },
}).then(() => {
// 动画完成后：
// 1. 隐藏元素
setIsVisible(false);
// 2. 标记动画完成
isAnimating.current = false;
});
}
}, [currentContent.currentPort, currentContent.currentBranchOffice, controls, isVisible, type]);
// ==================== Panel 类型的滑动动画逻辑 ====================
// 辅助函数：计算动画的初始位置
// @returns {number} 初始 X 轴位移值（负数表示在左侧，正数表示在右侧）
const getInitialX = () => side === "left" ? -300 : 300;
// ==================== 折叠/展开处理 ====================
@ -109,6 +201,11 @@ export function useContentAnimation(currentContent, isCollapsed, side = "left",
// ==================== 主题：监听状态变化并执行动画 ====================
useEffect(() => {
// 仅处理 panel 类型
if (type !== "panel") {
return;
}
// ==================== 场景 1：纯地图模式（最高优先级）====================
if (isPureMap) {
// 如果元素当前可见，执行离开动画并隐藏
@ -155,7 +252,7 @@ export function useContentAnimation(currentContent, isCollapsed, side = "left",
);
// ----- 情况 A：首次渲染 -----
if (isLeftFirstRender.current) {
if (isFirstRender.current) {
// 1. 设置元素到初始隐藏位置（侧边外部）
controls.set({
x: getInitialX(),
@ -173,7 +270,7 @@ export function useContentAnimation(currentContent, isCollapsed, side = "left",
});
// 4. 标记首次渲染完成
isLeftFirstRender.current = false;
isFirstRender.current = false;
}
// ----- 情况 B：内容变化（用户切换工具）-----
@ -230,10 +327,18 @@ export function useContentAnimation(currentContent, isCollapsed, side = "left",
});
});
}
}, [currentContent, isCollapsed, isPureMap, controls, displayedContent, side, isVisible]);
}, [currentContent, isCollapsed, isPureMap, controls, displayedContent, side, isVisible, type]);
// ==================== 返回值 ====================
// 返回值根据类型不同而不同
if (type === "index") {
return {
controls, // motion 动画控制器
isVisible, // 元素可见性状态
};
}
return {
controls, // motion 动画控制器
displayedContent, // 延迟显示的内容（用于动画过渡）

4
src/pages/Container/Map/index.js
View File

@ -18,7 +18,7 @@ import {
} from "./js/mittKey";
import "./index.less";
function Map() {
function Map(props) {
const query = useGetUrlQuery();
const viewer = useRef(null); // cesium地图实例
@ -98,7 +98,7 @@ function Map() {
<CenterUtils setArea={setArea} />
<RightUtils isFullscreen={isFullscreen} toggleFullscreen={toggleFullscreen} setPureMap={setPureMap} />
<BottomUtils setBottomUtilsCurrentIndex={setBottomUtilsCurrentIndex} />
<Content />
<Content history={props.history} />
</div>
</Context.Provider>
<div

203
src/pages/Container/Share/components/LeftPanel/index.js
View File

@ -1,203 +0,0 @@
import "./index.less";
import Title from "~/pages/Container/WhiteBranchOffice/components/Title";
import cake from "~/assets/images/public/white/img7.png";
import bg1 from "~/assets/images/public/white/bg1.png";
import img1 from "~/assets/images/public/white/img1.png";
import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
import {useState} from "react";
function WhiteShareLeft() {
const [block1List, setBlock1List] = useState([
{ name: "隐患总数", num: "1398" },
{ name: "隐患整改数", num: "1212" },
{ name: "隐患未整改数", num: "563" },
{ name: "隐患整改率", num: "89%" },
]);
const [block2List, setBlock2List] = useState([
{ name: "隐患总数", num: "1398" },
{ name: "隐患整改数", num: "1212" },
{ name: "隐患未整改数", num: "563" },
{ name: "隐患整改率", num: "89%" },
]);
const [block3List, setBlock3List] = useState([
{ id: 1, level: "二级", name: "东区一号罐", state: "正常"},
{ id: 2, level: "二级", name: "东区一号罐", state: "正常"},
{ id: 3, level: "二级", name: "东区一号罐", state: "正常"},
{ id: 4, level: "二级", name: "东区一号罐", state: "正常"},
{ id: 5, level: "二级", name: "东区一号罐", state: "正常"},
{ id: 6, level: "二级", name: "东区一号罐", state: "正常"},
]);
const [block4List, setBlock4List] = useState([
{ name: "一级", total: "1398" ,rectificationNumber:"56", unNumber:"56", rectificationRate:"89%" },
{ name: "一级", total: "1398" ,rectificationNumber:"56", unNumber:"56", rectificationRate:"89%" },
{ name: "一级", total: "1398" ,rectificationNumber:"56", unNumber:"56", rectificationRate:"89%" },
{ name: "一级", total: "1398" ,rectificationNumber:"56", unNumber:"56", rectificationRate:"89%" },
]);
return (
<div className="white_share_left">
<div className="block1">
<Title title={"风险辨识管控情况"} />
<div className="white_share_left_conten">
<div className="cake">
<img src={cake} alt="" />
</div>
<div className="cake_contant" style={{ backgroundImage: `url(${bg1})` }}>
<div className="item">
<div className="title">重大风险</div>
<div className="num fcr">467</div>
</div>
<div className="item">
<div className="title">较大风险</div>
<div className="num fco">467</div>
</div>
<div className="item">
<div className="title">一般风险</div>
<div className="num fcc">467</div>
</div>
<div className="item">
<div className="title">低风险</div>
<div className="num fcb">98091</div>
</div>
</div>
</div>
</div>
<div className="block2">
<Title title={"重大危险源安全情况"} />
<div className="white_share_left_conten">
<div className="top">
<div className="item">
<div className="title">二级重大危险源（1个）</div>
<div className="item_container">
<span>储罐数: <span className="fcb">3</span> </span>
<span>在用数: <span className="fcg">3</span> </span>
<span>停用数: <span className="fcr">0</span></span>
</div>
</div>
<div className="item">
<div className="title">三级重大危险源（2个）</div>
<div className="item_container">
<span>储罐数: <span className="fcb">10</span> </span>
<span>在用数: <span className="fcg">10</span> </span>
<span>停用数: <span className="fcr">0</span></span>
</div>
</div>
</div>
<div className="container">
<div className="left_table">
<div className="table">
<div className="tr">
<div className="th">级别</div>
<div className="th">名称</div>
<div className="th">状态</div>
</div>
<div className="scroll">
<SeamlessScroll list={block3List} step={0.5}>
{block3List.map((item, index) => (
<div key={index} className="tr">
<div className="td">{item.level}</div>
<div className="td">{item.name}</div>
<div className="td">{item.state}</div>
</div>
))}
</SeamlessScroll>
</div>
</div>
</div>
<div className="info">
<div className="title"><img src={img1} alt=""/> 东区二号罐液位过低</div>
<div className="comment">
<p>温度待处置数/报警个数：<span>0/0</span> </p>
<p>压力待处置数/报警个数：<span>0/0</span></p>
<p>液位待处置数/报警个数：<span> <span className="fcr">1</span>/1</span></p>
</div>
</div>
</div>
</div>
</div>
<div className="block3">
<Title title={"隐患排查治理情况"} />
<div className="white_share_left_conten">
<div className="top">
<div className="item">
<div className="content">
<div className="title">股份<br/>公司</div>
<div className="info">
{
block1List.map((item, index) => (
<div key={index} className="list">
<div className="name">{item.name}</div>
<div className="num">{item.num}</div>
</div>
))
}
</div>
</div>
</div>
<div className="item">
<div className="content">
<div className="title">分子<br/>公司</div>
<div className="info">
{
block2List.map((item, index) => (
<div key={index} className="list">
<div className="name">{item.name}</div>
<div className="num">{item.num}</div>
</div>
))
}
</div>
</div>
</div>
</div>
<div className="field">
<div className="top">领域隐患</div>
</div>
<div className="main">
<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>
<div className="scroll">
<SeamlessScroll list={block4List} step={0.5}>
{block4List.map((item, index) => (
<div key={index} className="tr">
<div className="td">{item.name}</div>
<div className="td">{item.total}</div>
<div className="td">{item.rectificationNumber}</div>
<div className="td">{item.unNumber}</div>
<div className="td">{item.rectificationRate}</div>
</div>
))}
</SeamlessScroll>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
export default WhiteShareLeft;

275
src/pages/Container/Share/components/MiddlePanel/index.js
View File

@ -1,275 +0,0 @@
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() {
const [block1List, setBlock1List] = useState([
{ name: "综合应急预案", num: "13" },
{ name: "现场处置方案", num: "75" },
{ name: "应急应对措施", num: "58" },
{ name: "应急救援队伍", num: "3" },
]);
const [block2List, setBlock2List] = useState([
{ unitName: "二公司", name: "王岩" ,duties:"公司经理", phone:"3095311" },
{ unitName: "二公司", name: "王岩" ,duties:"公司经理", phone:"3095311" },
{ unitName: "二公司", name: "王岩" ,duties:"公司经理", phone:"3095311" },
{ unitName: "二公司", name: "王岩" ,duties:"公司经理", phone:"3095311" },
{ unitName: "二公司", name: "王岩" ,duties:"公司经理", phone:"3095311" },
{ unitName: "二公司", name: "王岩" ,duties:"公司经理", phone:"3095311" },
{ unitName: "二公司", name: "王岩" ,duties:"公司经理", phone:"3095311" },
]);
const [block3List, setBlock3List] = useState([
{ unitName: "二公司", state: "未处置" ,preventiveMeasures:"远离大树、电线杆..." },
{ unitName: "二公司", state: "未处置" ,preventiveMeasures:"远离大树、电线杆..." },
{ unitName: "二公司", state: "未处置" ,preventiveMeasures:"远离大树、电线杆..." },
{ unitName: "二公司", state: "未处置" ,preventiveMeasures:"远离大树、电线杆..." },
{ 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="white_share_middle">
<div className="block1">
<Title title={"应急管理"} />
<div className="block1_content">
<div className="block1_content_con">
<div className="emergency_left">
<div className="top">
{
block1List.map((item, index) => (
<div key={index} className="item">
<p className="name">{item.name}</p>
<div className="num">{item.num}</div>
</div>
))
}
</div>
<div className="emergency_left_main">
<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="scroll">
<SeamlessScroll list={block2List} step={0.5}>
{block2List.map((item, index) => (
<div key={index} className="tr">
<div className="td">{item.unitName}</div>
<div className="td">{item.name}</div>
<div className="td">{item.duties}</div>
<div className="td">{item.phone}</div>
</div>
))}
</SeamlessScroll>
</div>
</div>
</div>
</div>
<div className="emergency_right">
<div className="weather">
<div className="title">秦皇岛市气象台发布大风橙色预警[工级/严重]</div>
<div className="weather_main">
<div className="item">
<img src={weather} alt=""/> 晴
</div>
<div className="item">
<div>温度</div>
<div className="num">25℃</div>
</div>
<div className="item">
<div>风速：</div>
<div className="num">16米8级</div>
</div>
</div>
<div className="weather_bottom">
<div className="table">
<div className="tr">
<div className="th">公司名称</div>
<div className="th">处置状态</div>
<div className="th">预防措施</div>
</div>
<div className="scroll">
<SeamlessScroll list={block3List} step={0.5}>
{block3List.map((item, index) => (
<div key={index} className="tr">
<div className="td">{item.unitName}</div>
<div className="td fcb">{item.state}</div>
<div className="td">{item.preventiveMeasures}</div>
</div>
))}
</SeamlessScroll>
</div>
</div>
</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>
);
}
export default WhiteShareMiddle;

242
src/pages/Container/Share/components/MiddlePanel/index.less
View File

@ -1,242 +0,0 @@
.white_share_middle{
width: 840px;
.block1{
width: 840px;
.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;
.block1_content_con{
display: flex;
.emergency_left{
width: 480px;
.top{
width: 100%;
display: flex;
justify-content: space-between;
padding: 5px;
box-sizing: border-box;
.item{
border-width: 1px;
border-color: rgb(255, 255, 255);
border-style: solid;
background-color: rgba(197, 224, 246, 0.8);
box-shadow: inset 1px 1.732px 1px 0 rgba(124, 163, 189, 0.3);
padding: 5px 12px;
text-align: center;
color: #3d5882;
border-radius: 4px;
p{
padding: 0;
margin: 0;
}
.num{
font-size: 20px;
color: #4387d6;
}
}
}
.emergency_left_main{
width: 470px;
margin: 0 5px 5px;
border-style: solid;
border-width: 1px;
border-color: #b5d7f7;
border-radius: 4px;
background-color: rgb(205, 233, 255);
padding: 5px;
box-sizing: border-box;
.table-style(109px, 1fr 1fr 1fr 1fr);
}
}
.emergency_right{
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;
font-size: 14px;
font-weight: bold;
}
.weather_main{
width: 100%;
display: flex;
justify-content: space-between;
color: #2b4977;
font-size: 14px;
font-weight: bold;
margin-top: 5px;
.item{
width: 30%;
text-align: center;
.num{
color: #2e75c6;
}
}
}
.weather_bottom{
.fcb{
color: #0c90ff;
}
.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;
}
}
}
}
}
.table-style(@height, @grid-template-columns) {
.table {
border: 1px solid #fff;
.scroll {
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;
}
}
}
}

187
src/pages/Container/Share/components/RightPanel/index.js
View File

@ -1,187 +0,0 @@
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;

231
src/pages/Container/Share/components/RightPanel/index.less
View File

@ -1,231 +0,0 @@
.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;
}
}
}
}

33
src/pages/Container/Share/index.js
View File

@ -1,33 +0,0 @@
import bg from "~/assets/images/public/white/bg.png";
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 />
<div className="white_share_office_content">
<div className="left">
<Left/>
</div>
<div className="middle">
<Middle/>
</div>
<div className="right">
<Right/>
</div>
</div>
</div>
);
}
export default WhiteShareOffice;

0
src/pages/Container/WhiteBranchOffice/components/CenterPanel/echarts.js → src/pages/Container/White/BranchOffice/components/CenterPanel/echarts.js
View File

2
src/pages/Container/WhiteBranchOffice/components/CenterPanel/index.js → src/pages/Container/White/BranchOffice/components/CenterPanel/index.js
View File

@ -2,7 +2,7 @@ import { useEventListener, useMount } from "ahooks";
import { useEffect, useRef, useState } from "react";
import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
import { getAlertColor, getWeatherIcon } from "~/pages/Container/Map/components/Content/branchOffice/IndexLeft";
import Title from "~/pages/Container/WhiteBranchOffice/components/Title";
import Title from "~/pages/Container/White/BranchOffice/components/Title";
import { initEcharts1, initEcharts2, initEcharts3, initEcharts4, initEcharts5 } from "./echarts";
import "./index.less";

0
src/pages/Container/WhiteBranchOffice/components/CenterPanel/index.less → src/pages/Container/White/BranchOffice/components/CenterPanel/index.less
View File

2
src/pages/Container/WhiteBranchOffice/components/LeftPanel/index.js → src/pages/Container/White/BranchOffice/components/LeftPanel/index.js
View File

@ -3,7 +3,7 @@ import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
import img4 from "~/assets/images/public/white/img4.png";
import img5 from "~/assets/images/public/white/img5.png";
import img6 from "~/assets/images/public/white/img6.png";
import Title from "~/pages/Container/WhiteBranchOffice/components/Title";
import Title from "~/pages/Container/White/BranchOffice/components/Title";
import "./index.less";
function LeftPanel() {

0
src/pages/Container/WhiteBranchOffice/components/LeftPanel/index.less → src/pages/Container/White/BranchOffice/components/LeftPanel/index.less
View File

2
src/pages/Container/WhiteBranchOffice/components/RightPanel/index.js → src/pages/Container/White/BranchOffice/components/RightPanel/index.js
View File

@ -3,7 +3,7 @@ import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
import bg1 from "~/assets/images/public/white/bg5.png";
import bg2 from "~/assets/images/public/white/bg6.png";
import img1 from "~/assets/images/public/white/img3.png";
import Title from "~/pages/Container/WhiteBranchOffice/components/Title";
import Title from "~/pages/Container/White/BranchOffice/components/Title";
import "./index.less";
function RightPanel() {

0
src/pages/Container/WhiteBranchOffice/components/RightPanel/index.less → src/pages/Container/White/BranchOffice/components/RightPanel/index.less
View File

0
src/pages/Container/WhiteBranchOffice/components/Title/index.js → src/pages/Container/White/BranchOffice/components/Title/index.js
View File

0
src/pages/Container/WhiteBranchOffice/components/Title/index.less → src/pages/Container/White/BranchOffice/components/Title/index.less
View File

12
src/pages/Container/WhiteBranchOffice/index.js → src/pages/Container/White/BranchOffice/index.js
View File

@ -1,13 +1,13 @@
import { useMount } from "ahooks";
import autoFit from "autofit.js";
import bg from "~/assets/images/public/white/bg.png";
import Header from "~/pages/Container/Share/components/Header";
import CenterPanel from "~/pages/Container/WhiteBranchOffice/components/CenterPanel";
import LeftPanel from "~/pages/Container/WhiteBranchOffice/components/LeftPanel";
import RightPanel from "~/pages/Container/WhiteBranchOffice/components/RightPanel";
import CenterPanel from "~/pages/Container/White/BranchOffice/components/CenterPanel";
import LeftPanel from "~/pages/Container/White/BranchOffice/components/LeftPanel";
import RightPanel from "~/pages/Container/White/BranchOffice/components/RightPanel";
import Header from "~/pages/Container/White/Share/components/Header";
import "./index.less";
function WhiteBranchOffice() {
function BranchOffice() {
useMount(() => {
autoFit.init({ dw: 1920, dh: 1080, el: ".white_branch_office", resize: true });
});
@ -24,4 +24,4 @@ function WhiteBranchOffice() {
);
}
export default WhiteBranchOffice;
export default BranchOffice;

0
src/pages/Container/WhiteBranchOffice/index.less → src/pages/Container/White/BranchOffice/index.less
View File

15
src/pages/Container/Share/components/Header/index.js → src/pages/Container/White/Share/components/Header/index.js
View File

@ -1,11 +1,9 @@
import bg from "~/assets/images/public/white/titlebg.png";
import title from "~/assets/images/public/white/title.png";
import more from "~/assets/images/public/white/more.png";
import title from "~/assets/images/public/white/title.png";
import bg from "~/assets/images/public/white/titlebg.png";
import "./index.less";
function WhiteShareHead() {
function Header() {
return (
<div className="white_share_header" style={{ backgroundImage: `url(${bg})` }}>
<div className="left">
@ -13,13 +11,13 @@ function WhiteShareHead() {
<div className="list">10~27℃ 多云 星期三</div>
</div>
<div className="title">
<img src={title} alt=""/>
<img src={title} alt="" />
</div>
<div className="right">
<div className="top">
<div className="name">股份公司数据统计</div>
<div className="more">
<img src={more} alt=""/>
<img src={more} alt="" />
</div>
<div className="down_main">
<div className="list">二公司</div>
@ -28,10 +26,9 @@ function WhiteShareHead() {
<div className="list">九公司</div>
</div>
</div>
</div>
</div>
);
}
export default WhiteShareHead;
export default Header;

47
src/pages/Container/Share/components/Header/index.less → src/pages/Container/White/Share/components/Header/index.less
View File

@ -1,57 +1,60 @@
.white_share_header{
.white_share_header {
width: 100%;
height: 86px;
position: relative;
background-repeat: no-repeat;
background-size: 100% 100%;
.title{
.title {
position: absolute;
left: 50.5%;
transform: translateX(-50%);
top: 25px;
}
.left{
.left {
position: absolute;
top: 30px;
left: 20px;
display: flex;
.list{
.list {
padding: 6px 15px;
border-radius: 23px;
background-image: -moz-linear-gradient( 180deg, rgb(217,239,253) 0%, rgb(225,243,254) 58%, rgb(232,246,255) 100%);
background-image: -webkit-linear-gradient( 180deg, rgb(217,239,253) 0%, rgb(225,243,254) 58%, rgb(232,246,255) 100%);
background-image: -ms-linear-gradient( 180deg, rgb(217,239,253) 0%, rgb(225,243,254) 58%, rgb(232,246,255) 100%);
background-image: linear-gradient(180deg, rgb(217, 239, 253) 0%, rgb(225, 243, 254) 58%, rgb(232, 246, 255) 100%);
box-shadow: inset 0 1px 3px 0 rgba(49, 122, 202, 0.75);
margin-right: 10px;
color: #465683;
opacity: 0.8;
}
}
.right{
.right {
position: absolute;
right: 20px;
top:25px;
top: 25px;
border-radius: 23px;
background-image: -moz-linear-gradient( 180deg, rgb(217,239,253) 0%, rgb(225,243,254) 58%, rgb(232,246,255) 100%);
background-image: -webkit-linear-gradient( 180deg, rgb(217,239,253) 0%, rgb(225,243,254) 58%, rgb(232,246,255) 100%);
background-image: -ms-linear-gradient( 180deg, rgb(217,239,253) 0%, rgb(225,243,254) 58%, rgb(232,246,255) 100%);
background-image: linear-gradient(180deg, rgb(217, 239, 253) 0%, rgb(225, 243, 254) 58%, rgb(232, 246, 255) 100%);
box-shadow: inset 0 1px 3px 0 rgba(49, 122, 202, 0.75);
padding: 6px 15px;
color: #465683;
.top{
.top {
display: flex;
justify-content: space-between;
position: relative;
.name{
.name {
margin-right: 20px;
font-weight: bold;
}
.more{
.more {
cursor: pointer;
}
.down_main{
.down_main {
width: 150px;
position: absolute;
top: 30px;
@ -60,7 +63,8 @@
border: 1px solid #b8dcf3;
border-radius: 4px;
opacity: 0;
.list{
.list {
font-weight: bold;
border-bottom: 1px solid #d4e3f7;
line-height: 36px;
@ -68,17 +72,18 @@
text-align: center;
font-size: 12px;
cursor: pointer;
&:hover{
&:hover {
background: #def1ff;
}
}
}
&:hover{
.down_main{
&:hover {
.down_main {
opacity: 1;
}
}
}
}
}

239
src/pages/Container/White/Share/components/LeftPanel/index.js Normal file
View File

@ -0,0 +1,239 @@
import { useState } from "react";
import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
import bg1 from "~/assets/images/public/white/bg1.png";
import img1 from "~/assets/images/public/white/img1.png";
import cake from "~/assets/images/public/white/img7.png";
import Title from "~/pages/Container/White/BranchOffice/components/Title";
import "./index.less";
function LeftPanel() {
const [block1List, setBlock1List] = useState([
{ name: "隐患总数", num: "1398" },
{ name: "隐患整改数", num: "1212" },
{ name: "隐患未整改数", num: "563" },
{ name: "隐患整改率", num: "89%" },
]);
const [block2List, setBlock2List] = useState([
{ name: "隐患总数", num: "1398" },
{ name: "隐患整改数", num: "1212" },
{ name: "隐患未整改数", num: "563" },
{ name: "隐患整改率", num: "89%" },
]);
const [block3List, setBlock3List] = useState([
{ id: 1, level: "二级", name: "东区一号罐", state: "正常" },
{ id: 2, level: "二级", name: "东区一号罐", state: "正常" },
{ id: 3, level: "二级", name: "东区一号罐", state: "正常" },
{ id: 4, level: "二级", name: "东区一号罐", state: "正常" },
{ id: 5, level: "二级", name: "东区一号罐", state: "正常" },
{ id: 6, level: "二级", name: "东区一号罐", state: "正常" },
]);
const [block4List, setBlock4List] = useState([
{ name: "一级", total: "1398", rectificationNumber: "56", unNumber: "56", rectificationRate: "89%" },
{ name: "一级", total: "1398", rectificationNumber: "56", unNumber: "56", rectificationRate: "89%" },
{ name: "一级", total: "1398", rectificationNumber: "56", unNumber: "56", rectificationRate: "89%" },
{ name: "一级", total: "1398", rectificationNumber: "56", unNumber: "56", rectificationRate: "89%" },
{ name: "一级", total: "1398", rectificationNumber: "56", unNumber: "56", rectificationRate: "89%" },
{ name: "一级", total: "1398", rectificationNumber: "56", unNumber: "56", rectificationRate: "89%" },
{ name: "一级", total: "1398", rectificationNumber: "56", unNumber: "56", rectificationRate: "89%" },
{ name: "一级", total: "1398", rectificationNumber: "56", unNumber: "56", rectificationRate: "89%" },
{ name: "一级", total: "1398", rectificationNumber: "56", unNumber: "56", rectificationRate: "89%" },
{ name: "一级", total: "1398", rectificationNumber: "56", unNumber: "56", rectificationRate: "89%" },
{ name: "一级", total: "1398", rectificationNumber: "56", unNumber: "56", rectificationRate: "89%" },
{ name: "一级", total: "1398", rectificationNumber: "56", unNumber: "56", rectificationRate: "89%" },
{ name: "一级", total: "1398", rectificationNumber: "56", unNumber: "56", rectificationRate: "89%" },
{ name: "一级", total: "1398", rectificationNumber: "56", unNumber: "56", rectificationRate: "89%" },
]);
return (
<div className="white_share_left">
<div className="block1">
<Title title="风险辨识管控情况" />
<div className="white_share_left_conten">
<div className="cake">
<img src={cake} alt="" />
</div>
<div className="cake_contant" style={{ backgroundImage: `url(${bg1})` }}>
<div className="item">
<div className="title">重大风险</div>
<div className="num fcr">467</div>
</div>
<div className="item">
<div className="title">较大风险</div>
<div className="num fco">467</div>
</div>
<div className="item">
<div className="title">一般风险</div>
<div className="num fcc">467</div>
</div>
<div className="item">
<div className="title">低风险</div>
<div className="num fcb">98091</div>
</div>
</div>
</div>
</div>
<div className="block2">
<Title title="重大危险源安全情况" />
<div className="white_share_left_conten">
<div className="top">
<div className="item">
<div className="title">二级重大危险源（1个）</div>
<div className="item_container">
<span>
储罐数:
<span className="fcb">3</span>
</span>
<span>
在用数:
<span className="fcg">3</span>
</span>
<span>
停用数:
<span className="fcr">0</span>
</span>
</div>
</div>
<div className="item">
<div className="title">三级重大危险源（2个）</div>
<div className="item_container">
<span>
储罐数:
<span className="fcb">10</span>
</span>
<span>
在用数:
<span className="fcg">10</span>
</span>
<span>
停用数:
<span className="fcr">0</span>
</span>
</div>
</div>
</div>
<div className="container">
<div className="left_table">
<div className="table">
<div className="tr">
<div className="th">级别</div>
<div className="th">名称</div>
<div className="th">状态</div>
</div>
<div className="scroll">
<SeamlessScroll list={block3List} step={0.5}>
{block3List.map((item, index) => (
<div key={index} className="tr">
<div className="td">{item.level}</div>
<div className="td">{item.name}</div>
<div className="td">{item.state}</div>
</div>
))}
</SeamlessScroll>
</div>
</div>
</div>
<div className="info">
<div className="title">
<img src={img1} alt="" />
东区二号罐液位过低
</div>
<div className="comment">
<p>
温度待处置数/报警个数：
<span>0/0</span>
</p>
<p>
压力待处置数/报警个数：
<span>0/0</span>
</p>
<p>
液位待处置数/报警个数：
<span>
<span className="fcr">1</span>
/1
</span>
</p>
</div>
</div>
</div>
</div>
</div>
<div className="block3">
<Title title="隐患排查治理情况" />
<div className="white_share_left_conten">
<div className="top">
<div className="item">
<div className="content">
<div className="title">
股份
<br />
公司
</div>
<div className="info">
{
block1List.map((item, index) => (
<div key={index} className="list">
<div className="name">{item.name}</div>
<div className="num">{item.num}</div>
</div>
))
}
</div>
</div>
</div>
<div className="item">
<div className="content">
<div className="title">
分子
<br />
公司
</div>
<div className="info">
{
block2List.map((item, index) => (
<div key={index} className="list">
<div className="name">{item.name}</div>
<div className="num">{item.num}</div>
</div>
))
}
</div>
</div>
</div>
</div>
<div className="field">
<div className="top">领域隐患</div>
</div>
<div className="main">
<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>
<div className="scroll">
<SeamlessScroll list={block4List} step={0.5}>
{block4List.map((item, index) => (
<div key={index} className="tr">
<div className="td">{item.name}</div>
<div className="td">{item.total}</div>
<div className="td">{item.rectificationNumber}</div>
<div className="td">{item.unNumber}</div>
<div className="td">{item.rectificationRate}</div>
</div>
))}
</SeamlessScroll>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
export default LeftPanel;

158
src/pages/Container/Share/components/LeftPanel/index.less → src/pages/Container/White/Share/components/LeftPanel/index.less
View File

@ -1,25 +1,20 @@
.white_share_left{
width: 500px;
.white_share_left {
color: #305683;
.block1{
.block1 {
width: 100%;
.white_share_left_conten{
.white_share_left_conten {
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%);
background-image: linear-gradient(90deg, rgb(218, 233, 250) 39%, rgb(226, 239, 255) 100%);
padding: 5px;
border: 2px solid transparent;
border-image: linear-gradient(180deg, rgba(255,255,255,0), #ffffff) 1;
border-image: linear-gradient(180deg, rgba(255, 255, 255, 0), #ffffff) 1;
display: flex;
align-items: center;
border-radius: 2px;
.cake_contant{
.cake_contant {
width: 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
@ -27,53 +22,59 @@
display: flex;
flex-wrap: wrap;
.item{
.item {
width: 50%;
text-align: center;
margin: 5px 0;
.title{
.title {
font-size: 14px;
font-weight: bold;
color: #2b4977;
}
.num{
.num {
font-size: 24px;
}
.fcb{
.fcb {
color: #5daaff;
}
.fcc{
.fcc {
color: #ffa801;
}
.fco{
.fco {
color: #ff6000;
}
.fcr{
.fcr {
color: #ff2709;
}
}
}
}
}
.block2{
.block2 {
margin-top: 10px;
.white_share_left_conten{
.white_share_left_conten {
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%);
background-image: linear-gradient(90deg, rgb(218, 233, 250) 39%, rgb(226, 239, 255) 100%);
padding: 5px;
border: 2px solid transparent;
border-image: linear-gradient(180deg, rgba(255,255,255,0), #ffffff) 1;
border-image: linear-gradient(180deg, rgba(255, 255, 255, 0), #ffffff) 1;
border-radius: 2px;
.top{
.top {
width: 100%;
display: flex;
justify-content: space-between;
.item{
.item {
text-align: center;
border-style: solid;
border-width: 1px;
@ -84,101 +85,107 @@
box-shadow: 0 2px 2px 0 rgba(114, 163, 191, 0.45);
padding: 10px;
.title{
.title {
font-weight: bold;
color: #305683;
}
.item_container{
color: #51719c;
.item_container {
color: #51719c;
margin-top: 5px;
.fcb{
.fcb {
color: #0097f7;
}
.fcg{
.fcg {
color: #0a9503;
}
.fcr{
.fcr {
color: #ff2100;
}
}
}
}
.container{
.container {
width: 100%;
display: flex;
margin-top: 10px;
.left_table{
.left_table {
width: 50%;
.table-style(109px, 1fr 1.2fr 1fr);
}
.info{
.info {
width: 50%;
margin-left: 10px;
.title{
.title {
font-size: 14px;
border-width: 1px;
border-color: rgb(255, 255, 255);
border-style: solid;
background-image: -moz-linear-gradient( 180deg, rgb(217,239,253) 0%, rgb(225,243,254) 58%, rgb(232,246,255) 100%);
background-image: -webkit-linear-gradient( 180deg, rgb(217,239,253) 0%, rgb(225,243,254) 58%, rgb(232,246,255) 100%);
background-image: -ms-linear-gradient( 180deg, rgb(217,239,253) 0%, rgb(225,243,254) 58%, rgb(232,246,255) 100%);
background-image: linear-gradient(180deg, rgb(217, 239, 253) 0%, rgb(225, 243, 254) 58%, rgb(232, 246, 255) 100%);
box-shadow: inset 0 1px 3px 0 rgba(49, 122, 202, 0.48);
border-radius: 50px;
padding: 5px 10px;
font-weight: bold;
color: #38688e;
}
.comment{
.comment {
padding-left: 10px;
margin-top: 10px;
p{
p {
margin: 0;
line-height: 30px;
color: #305683;
span{
span {
color: #00aeff;
font-weight: bold;
.fcr{
.fcr {
color: #f90102;
}
}
}
}
}
}
}
}
.block3{
.block3 {
margin-top: 10px;
.white_share_left_conten{
.white_share_left_conten {
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%);
background-image: linear-gradient(90deg, rgb(218, 233, 250) 39%, rgb(226, 239, 255) 100%);
padding: 5px;
border: 2px solid transparent;
border-image: linear-gradient(180deg, rgba(255,255,255,0), #ffffff) 1;
border-image: linear-gradient(180deg, rgba(255, 255, 255, 0), #ffffff) 1;
border-radius: 2px;
.top{
.top {
width: 100%;
.item{
.item {
width: 100%;
border-style: solid;
border-width: 1px;
border-color:#aacbed;
border-color: #aacbed;
border-radius: 4px;
background-color: rgb(205, 233, 255);
padding: 4px;
margin-bottom: 5px;
.content{
.content {
width: 100%;
border-style: solid;
border-width: 1px;
@ -188,30 +195,33 @@
box-shadow: 0 1px 1px 0 rgba(114, 163, 191, 0.45);
display: flex;
align-items: center;
.title{
.title {
font-size: 18px;
color: #457fc0;
font-weight: bold;
border-style: solid;
border-width: 2px;
border-color: #c6e6fe;
background-image: -moz-linear-gradient( 90deg, rgb(227,240,255) 0%, rgb(201,231,249) 100%);
background-image: -webkit-linear-gradient( 90deg, rgb(227,240,255) 0%, rgb(201,231,249) 100%);
background-image: -ms-linear-gradient( 90deg, rgb(227,240,255) 0%, rgb(201,231,249) 100%);
background-image: linear-gradient(90deg, rgb(227, 240, 255) 0%, rgb(201, 231, 249) 100%);
text-align: center;
padding: 2px 10px;
line-height: 20px;
}
.info{
.info {
flex: 1;
display: flex;
.list{
.list {
text-align: center;
width: 25%;
.name{
.name {
font-size: 12px;
}
.num{
.num {
font-size: 16px;
}
}
@ -219,9 +229,11 @@
}
}
}
.field{
.field {
width: 100%;
.top{
.top {
width: 100%;
background-color: rgb(205, 233, 255);
text-align: center;
@ -232,13 +244,15 @@
color: #457fc0;
}
}
.main{
.main {
width: 100%;
.table-style(70px, 1fr 1fr 1fr 1fr 1fr);
.table-style(200px, 1fr 1fr 1fr 1fr 1fr);
}
}
}
}
.table-style(@height, @grid-template-columns) {
.table {
border: 1px solid #fff;

315
src/pages/Container/White/Share/components/MiddlePanel/index.js Normal file
View File

@ -0,0 +1,315 @@
import { useState } from "react";
import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
import weather from "~/assets/images/public/weather/1.png";
import img1 from "~/assets/images/public/white/titlebg1.png";
import Title from "~/pages/Container/White/BranchOffice/components/Title";
import "./index.less";
function MiddlePanel() {
const [block1List, setBlock1List] = useState([
{ name: "综合应急预案", num: "13" },
{ name: "现场处置方案", num: "75" },
{ name: "应急应对措施", num: "58" },
{ name: "应急救援队伍", num: "3" },
]);
const [block2List, setBlock2List] = useState([
{ unitName: "二公司", name: "王岩", duties: "公司经理", phone: "3095311" },
{ unitName: "二公司", name: "王岩", duties: "公司经理", phone: "3095311" },
{ unitName: "二公司", name: "王岩", duties: "公司经理", phone: "3095311" },
{ unitName: "二公司", name: "王岩", duties: "公司经理", phone: "3095311" },
{ unitName: "二公司", name: "王岩", duties: "公司经理", phone: "3095311" },
{ unitName: "二公司", name: "王岩", duties: "公司经理", phone: "3095311" },
{ unitName: "二公司", name: "王岩", duties: "公司经理", phone: "3095311" },
{ unitName: "二公司", name: "王岩", duties: "公司经理", phone: "3095311" },
{ unitName: "二公司", name: "王岩", duties: "公司经理", phone: "3095311" },
{ unitName: "二公司", name: "王岩", duties: "公司经理", phone: "3095311" },
{ unitName: "二公司", name: "王岩", duties: "公司经理", phone: "3095311" },
{ unitName: "二公司", name: "王岩", duties: "公司经理", phone: "3095311" },
{ unitName: "二公司", name: "王岩", duties: "公司经理", phone: "3095311" },
]);
const [block3List, setBlock3List] = useState([
{ unitName: "二公司", state: "未处置", preventiveMeasures: "远离大树、电线杆..." },
{ unitName: "二公司", state: "未处置", preventiveMeasures: "远离大树、电线杆..." },
{ unitName: "二公司", state: "未处置", preventiveMeasures: "远离大树、电线杆..." },
{ unitName: "二公司", state: "未处置", preventiveMeasures: "远离大树、电线杆..." },
{ unitName: "二公司", state: "未处置", preventiveMeasures: "远离大树、电线杆..." },
{ unitName: "二公司", state: "未处置", preventiveMeasures: "远离大树、电线杆..." },
{ unitName: "二公司", state: "未处置", preventiveMeasures: "远离大树、电线杆..." },
{ unitName: "二公司", state: "未处置", preventiveMeasures: "远离大树、电线杆..." },
{ unitName: "二公司", state: "未处置", preventiveMeasures: "远离大树、电线杆..." },
{ unitName: "二公司", state: "未处置", preventiveMeasures: "远离大树、电线杆..." },
{ unitName: "二公司", state: "未处置", preventiveMeasures: "远离大树、电线杆..." },
{ unitName: "二公司", state: "未处置", preventiveMeasures: "远离大树、电线杆..." },
{ 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" },
{ 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" },
{ 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" },
{ 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" },
{ 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" },
{ 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" },
{ Name: "王丹", scores: "96" },
{ Name: "王丹", scores: "96" },
{ Name: "王丹", scores: "96" },
{ Name: "王丹", scores: "96" },
{ Name: "王丹", scores: "96" },
{ Name: "王丹", scores: "96" },
{ Name: "王丹", scores: "96" },
{ Name: "王丹", scores: "96" },
{ Name: "王丹", scores: "96" },
{ Name: "王丹", scores: "96" },
]);
return (
<div className="white_share_middle">
<div className="block1">
<Title title="应急管理" />
<div className="block1_content">
<div className="block1_content_con">
<div className="emergency_left">
<div className="top">
{
block1List.map((item, index) => (
<div key={index} className="item">
<p className="name">{item.name}</p>
<div className="num">{item.num}</div>
</div>
))
}
</div>
<div className="emergency_left_main">
<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="scroll">
<SeamlessScroll list={block2List} step={0.5}>
{block2List.map((item, index) => (
<div key={index} className="tr">
<div className="td">{item.unitName}</div>
<div className="td">{item.name}</div>
<div className="td">{item.duties}</div>
<div className="td">{item.phone}</div>
</div>
))}
</SeamlessScroll>
</div>
</div>
</div>
</div>
<div className="emergency_right">
<div className="weather">
<div className="title">秦皇岛市气象台发布大风橙色预警[工级/严重]</div>
<div className="weather_main">
<div className="item">
<img src={weather} alt="" />
晴
</div>
<div className="item">
<div>温度</div>
<div className="num">25℃</div>
</div>
<div className="item">
<div>风速：</div>
<div className="num">16米8级</div>
</div>
</div>
<div className="weather_bottom">
<div className="table">
<div className="tr">
<div className="th">公司名称</div>
<div className="th">处置状态</div>
<div className="th">预防措施</div>
</div>
<div className="scroll">
<SeamlessScroll list={block3List} step={0.5}>
{block3List.map((item, index) => (
<div key={index} className="tr">
<div className="td">{item.unitName}</div>
<div className="td fcb">{item.state}</div>
<div className="td">{item.preventiveMeasures}</div>
</div>
))}
</SeamlessScroll>
</div>
</div>
</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>
);
}
export default MiddlePanel;

251
src/pages/Container/White/Share/components/MiddlePanel/index.less Normal file
View File

@ -0,0 +1,251 @@
.white_share_middle {
.block1 {
.block1_content {
width: 100%;
background-image: 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;
.block1_content_con {
display: flex;
.emergency_left {
width: 480px;
.top {
width: 100%;
display: flex;
justify-content: space-between;
padding: 5px;
box-sizing: border-box;
.item {
border-width: 1px;
border-color: rgb(255, 255, 255);
border-style: solid;
background-color: rgba(197, 224, 246, 0.8);
box-shadow: inset 1px 1.732px 1px 0 rgba(124, 163, 189, 0.3);
padding: 5px 12px;
text-align: center;
color: #3d5882;
border-radius: 4px;
p {
padding: 0;
margin: 0;
}
.num {
font-size: 20px;
color: #4387d6;
}
}
}
.emergency_left_main {
width: 470px;
margin: 0 5px 5px;
border-style: solid;
border-width: 1px;
border-color: #b5d7f7;
border-radius: 4px;
background-color: rgb(205, 233, 255);
padding: 5px;
box-sizing: border-box;
.table-style(149px, 1fr 1fr 1fr 1fr);
}
}
.emergency_right {
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;
font-size: 14px;
font-weight: bold;
}
.weather_main {
width: 100%;
display: flex;
justify-content: space-between;
color: #2b4977;
font-size: 14px;
font-weight: bold;
margin-top: 5px;
.item {
width: 30%;
text-align: center;
.num {
color: #2e75c6;
}
}
}
.weather_bottom {
.fcb {
color: #0c90ff;
}
.table-style(145px, 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(240px, 2fr 1.5fr 1fr 1fr 1fr 1fr 1fr 1fr);
.table {
width: 100%;
}
}
}
}
}
.block2 {
margin-top: 10px;
.block2_content {
width: 100%;
background-image: 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(215px, 1fr 1fr);
padding: 5px;
.item {
width: 33%;
text-align: center;
.title {
font-size: 16px;
font-weight: bold;
color: #3b445c;
}
}
}
}
}
.table-style(@height, @grid-template-columns) {
.table {
border: 1px solid #fff;
.scroll {
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;
}
}
}
}

206
src/pages/Container/White/Share/components/RightPanel/index.js Normal file
View File

@ -0,0 +1,206 @@
import { useState } from "react";
import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
import bg1 from "~/assets/images/public/white/bg5.png";
import bg2 from "~/assets/images/public/white/bg6.png";
import img1 from "~/assets/images/public/white/img3.png";
import Title from "~/pages/Container/White/BranchOffice/components/Title";
import "./index.less";
function RightPanel() {
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: "44", number: "43" },
{ type: "其他", numberOfUnits: "44", number: "43" },
{ type: "其他", numberOfUnits: "44", number: "43" },
{ type: "其他", numberOfUnits: "44", number: "43" },
{ type: "其他", numberOfUnits: "44", number: "43" },
{ type: "其他", numberOfUnits: "44", number: "43" },
{ type: "其他", numberOfUnits: "44", number: "43" },
{ type: "其他", numberOfUnits: "44", number: "43" },
]);
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">
<SeamlessScroll list={block2List} step={0.5}>
{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>
))}
</SeamlessScroll>
</div>
<div className="tr fch">
<div className="td">统计</div>
<div className="td">43</div>
<div className="td">345</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">
<SeamlessScroll list={block2List} step={0.5}>
{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>
))}
</SeamlessScroll>
</div>
<div className="tr fch">
<div className="td">统计</div>
<div className="td">43</div>
<div className="td">345</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 RightPanel;

228
src/pages/Container/White/Share/components/RightPanel/index.less Normal file
View File

@ -0,0 +1,228 @@
.white_share_right {
.block1 {
.white_share_right_block1_content {
width: 100%;
background-image: 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: 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: 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(260px, 1fr 1fr 1fr);
.fch {
background: #e8ede1 !important;
}
}
}
}
}
.block4 {
margin-top: 10px;
.block4_content {
width: 100%;
background-image: 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(112px, 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;
}
}
}
.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;
}
}
}
}

33
src/pages/Container/White/Share/index.js Normal file
View File

@ -0,0 +1,33 @@
import { useMount } from "ahooks";
import autoFit from "autofit.js";
import bg from "~/assets/images/public/white/bg.png";
import Header from "~/pages/Container/White/Share/components/Header";
import Left from "~/pages/Container/White/Share/components/LeftPanel";
import Middle from "~/pages/Container/White/Share/components/MiddlePanel";
import Right from "~/pages/Container/White/Share/components/RightPanel";
import "./index.less";
function Share() {
useMount(() => {
autoFit.init({ dw: 1920, dh: 1080, el: ".white_share_office", resize: true });
});
return (
<div className="white_share_office" style={{ backgroundImage: `url(${bg})` }}>
<Header />
<div className="white_share_office_content">
<div className="left">
<Left />
</div>
<div className="middle">
<Middle />
</div>
<div className="right">
<Right />
</div>
</div>
</div>
);
}
export default Share;

23
src/pages/Container/Share/index.less → src/pages/Container/White/Share/index.less
View File

@ -1,23 +1,26 @@
.white_share_office{
.white_share_office {
width: 100vw;
height: 100vh;
background-size: 100% 100%;
background-repeat: no-repeat;
.white_share_office_content{
.white_share_office_content {
width: 100%;
display: flex;
justify-content: space-between;
.left{
gap: 10px;
padding: 0 10px;
.left {
width: 500px;
margin-left: 10px;
}
.middle{
width: 840px;
margin-left: 10px;
}
.right{
.middle {
flex: 1;
margin-left: 10px;
}
.right {
width: 540px;
}
}
}

5
src/pages/Container/White/index.js Normal file
View File

@ -0,0 +1,5 @@
function White(props) {
return props.children;
}
export default White;