master
LiuJiaNan
parent
ed51c0ad42
commit
518449613a
|
|
@ -1,39 +0,0 @@
|
||||||
import { RightOutlined } from "@ant-design/icons";
|
|
||||||
|
|
||||||
import closeIcon from "../../../../assets/images/public/bigScreen/close.png";
|
|
||||||
|
|
||||||
const Bubble = ({ id, title, description, onClose }) => {
|
|
||||||
const close = () => {
|
|
||||||
onClose && onClose();
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleViewMore = () => {
|
|
||||||
// navigate({
|
|
||||||
// pathname: '/map',
|
|
||||||
// search: `?id=${id}&CORP_INFO_ID=${data.CORP_INFO_ID}&mapType=${data.type}&name=${data.name}&longitude=${data.position.x}&latitude=${data.position.y}`
|
|
||||||
// });
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="bubble-wrap">
|
|
||||||
<div className="bubble-box">
|
|
||||||
<div className="bubble-wrap__header">
|
|
||||||
<div className="bubble-wrap__title">{title}</div>
|
|
||||||
<div className="bubble-wrap__close" style={{ backgroundImage: `url(${closeIcon})` }} onClick={close} />
|
|
||||||
</div>
|
|
||||||
<div className="bubble-wrap__content">
|
|
||||||
<div className="content__label">简介:</div>
|
|
||||||
<p className="content__text">{description}</p>
|
|
||||||
</div>
|
|
||||||
<div className="bubble-wrap__footer">
|
|
||||||
<p className="footer__text" onClick={handleViewMore}>
|
|
||||||
查看更多
|
|
||||||
<RightOutlined />
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Bubble;
|
|
||||||
|
|
@ -1,161 +0,0 @@
|
||||||
|
|
||||||
.bottom-container_con{
|
|
||||||
width: 1120px;
|
|
||||||
height: 240px;
|
|
||||||
position: absolute;
|
|
||||||
bottom: 20px;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
.top_container{
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
color: #ffffff;
|
|
||||||
font-size: 12px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
|
|
||||||
.title{
|
|
||||||
background: #074abe;
|
|
||||||
color: #ffffff;
|
|
||||||
padding: 5px 10px;
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
.con{
|
|
||||||
display: flex;
|
|
||||||
background: rgba(1,50,115,0.5);
|
|
||||||
line-height: 30px;
|
|
||||||
margin-left: 2px;
|
|
||||||
|
|
||||||
.item{
|
|
||||||
padding: 0 10px;
|
|
||||||
&:hover{
|
|
||||||
cursor: pointer;
|
|
||||||
background: #011d41;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.active{
|
|
||||||
background: #011d41;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.bottom-container{
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
.left{
|
|
||||||
width: 670px;
|
|
||||||
.title{
|
|
||||||
width: 360px;
|
|
||||||
height: 30px;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
padding-left: 20px;
|
|
||||||
color: #ffffff;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
.main{
|
|
||||||
width: 670px;
|
|
||||||
height: 160px;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
margin-top: 10px;
|
|
||||||
color: #ffffff;
|
|
||||||
.table{
|
|
||||||
width: 100%;
|
|
||||||
margin-top: 10px;
|
|
||||||
|
|
||||||
.head{
|
|
||||||
width: 100%;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr ;
|
|
||||||
color: #ffffff;
|
|
||||||
padding:10px 5px;
|
|
||||||
font-size: 12px;
|
|
||||||
text-align: center;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
.table-container{
|
|
||||||
width: 100%;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr ;
|
|
||||||
color: #ffffff;
|
|
||||||
padding: 5px;
|
|
||||||
font-size: 12px;
|
|
||||||
margin: 0px auto;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
.fc1{
|
|
||||||
color: #0c90ff;
|
|
||||||
}
|
|
||||||
.fc2{
|
|
||||||
color: #62b13f;
|
|
||||||
}
|
|
||||||
.fc3{
|
|
||||||
color: #ffa105;
|
|
||||||
}
|
|
||||||
&:hover{
|
|
||||||
background-color: rgba(14,197,208,0.1);
|
|
||||||
box-shadow: 0 0 1px #00e7ff;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.right{
|
|
||||||
width: 440px;
|
|
||||||
.title{
|
|
||||||
width: 360px;
|
|
||||||
height: 30px;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
color: #ffffff;
|
|
||||||
font-weight: bold;
|
|
||||||
padding-left: 20px;
|
|
||||||
}
|
|
||||||
.main{
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin-top: 10px;
|
|
||||||
.menu{
|
|
||||||
width: 120px;
|
|
||||||
border-radius: 5px;
|
|
||||||
background-color: rgb(13, 56, 119);
|
|
||||||
box-shadow: inset 0px 2px 2px 0px rgba(35, 24, 21, 0.17);
|
|
||||||
height: 180px;
|
|
||||||
color: #ffffff;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 30px;
|
|
||||||
padding: 5px;
|
|
||||||
|
|
||||||
.list{
|
|
||||||
width: 100%;
|
|
||||||
border-radius: 5px;
|
|
||||||
background-color: rgba(18, 96, 181, 0.4);
|
|
||||||
box-shadow: 0 2px 1px 0 rgba(2, 32, 95, 0.4);
|
|
||||||
margin-bottom: 5px;
|
|
||||||
&:hover{
|
|
||||||
border-radius: 5px;
|
|
||||||
background-color: rgb(18, 96, 181);
|
|
||||||
box-shadow: 0px 2px 1px 0px rgba(2, 32, 95, 0.4);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.active{
|
|
||||||
border-radius: 5px;
|
|
||||||
background-color: rgb(18, 96, 181);
|
|
||||||
box-shadow: 0px 2px 1px 0px rgba(2, 32, 95, 0.4);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
.video-container{
|
|
||||||
flex: 1;
|
|
||||||
margin-left: 10px;
|
|
||||||
padding: 10px;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
@ -1,116 +0,0 @@
|
||||||
import { useMount } from "ahooks";
|
|
||||||
import { useContext, useState } from "react";
|
|
||||||
import { CSSTransition } from "react-transition-group";
|
|
||||||
import guangImg from "~/assets/images/map_bi/guang.png";
|
|
||||||
import backImg from "~/assets/images/public/bigScreen/back.png";
|
|
||||||
import imgOk from "~/assets/images/public/bigScreen/imgok.png";
|
|
||||||
import topImg from "~/assets/images/public/bigScreen/title.png";
|
|
||||||
import { Context } from "~/pages/Container/Map/js/context";
|
|
||||||
import mitt from "~/pages/Container/Map/js/mitt";
|
|
||||||
import {
|
|
||||||
changePeopleTrajectorySelectVisibleMittKey,
|
|
||||||
clickBackMittKey,
|
|
||||||
clickBranchOfficePointMittKey,
|
|
||||||
clickPortPointMittKey,
|
|
||||||
deletePeoplePositionPointMittKey,
|
|
||||||
resetAllBottomUtilsCheckMittKey,
|
|
||||||
resetBottomCurrentIndexMittKey,
|
|
||||||
} from "~/pages/Container/Map/js/mittKey";
|
|
||||||
import "./index.less";
|
|
||||||
|
|
||||||
function Header() {
|
|
||||||
const { currentPort, currentBranchOffice, mapMethods, area } = useContext(Context);
|
|
||||||
|
|
||||||
const [animationKey, setAnimationKey] = useState(0);
|
|
||||||
|
|
||||||
useMount(() => {
|
|
||||||
setAnimationKey(Math.random());
|
|
||||||
});
|
|
||||||
|
|
||||||
const onBack = () => {
|
|
||||||
mitt.emit(deletePeoplePositionPointMittKey);
|
|
||||||
if (currentPort !== "00003" && currentBranchOffice) {
|
|
||||||
mitt.emit(clickPortPointMittKey, { id: "" });
|
|
||||||
mitt.emit(clickBranchOfficePointMittKey, { id: "" });
|
|
||||||
mapMethods.current.removeWall();
|
|
||||||
mapMethods.current.removeFourColorDiagram();
|
|
||||||
mapMethods.current.removeBranchOfficePoint();
|
|
||||||
mapMethods.current.removeMarkPoint();
|
|
||||||
mapMethods.current.flyTo();
|
|
||||||
mapMethods.current.addPortPoint();
|
|
||||||
}
|
|
||||||
else if (currentBranchOffice) {
|
|
||||||
mitt.emit(clickBranchOfficePointMittKey, { id: "" });
|
|
||||||
mapMethods.current.removeBranchOfficePoint();
|
|
||||||
mapMethods.current.removeMarkPoint();
|
|
||||||
mapMethods.current.returnPreviousCenterPoint();
|
|
||||||
setTimeout(() => {
|
|
||||||
mapMethods.current.addBranchOfficePoint(area);
|
|
||||||
}, 2000);
|
|
||||||
}
|
|
||||||
else if (currentPort) {
|
|
||||||
mitt.emit(clickPortPointMittKey, { id: "" });
|
|
||||||
mapMethods.current.removeWall();
|
|
||||||
mapMethods.current.removeFourColorDiagram();
|
|
||||||
mapMethods.current.removeBranchOfficePoint();
|
|
||||||
mapMethods.current.removeMarkPoint();
|
|
||||||
mapMethods.current.flyTo();
|
|
||||||
mapMethods.current.addPortPoint();
|
|
||||||
}
|
|
||||||
mitt.emit(resetBottomCurrentIndexMittKey);
|
|
||||||
mitt.emit(resetAllBottomUtilsCheckMittKey);
|
|
||||||
mitt.emit(clickBackMittKey);
|
|
||||||
mitt.emit(changePeopleTrajectorySelectVisibleMittKey, false);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="header_container">
|
|
||||||
<CSSTransition
|
|
||||||
in={animationKey !== 0}
|
|
||||||
timeout={1000}
|
|
||||||
classNames={{
|
|
||||||
enter: "animate__animated",
|
|
||||||
enterActive: "animate__animated animate__fadeInDown",
|
|
||||||
exit: "animate__animated",
|
|
||||||
exitActive: "animate__animated animate__fadeOutUp",
|
|
||||||
}}
|
|
||||||
unmountOnExit
|
|
||||||
>
|
|
||||||
<header style={{ backgroundImage: `url(${topImg})` }}>
|
|
||||||
<CSSTransition
|
|
||||||
in={!!(currentPort || currentBranchOffice)}
|
|
||||||
timeout={1000}
|
|
||||||
classNames={{
|
|
||||||
enter: "animate__animated",
|
|
||||||
enterActive: "animate__animated animate__fadeInDown",
|
|
||||||
exit: "animate__animated",
|
|
||||||
exitActive: "animate__animated animate__fadeOutUp",
|
|
||||||
}}
|
|
||||||
unmountOnExit
|
|
||||||
>
|
|
||||||
|
|
||||||
</CSSTransition>
|
|
||||||
<div
|
|
||||||
className="back"
|
|
||||||
onClick={onBack}
|
|
||||||
>
|
|
||||||
{" "}
|
|
||||||
<img src={backImg} alt="返回" />
|
|
||||||
{" "}
|
|
||||||
返回
|
|
||||||
</div>
|
|
||||||
<div className="title">秦港股份安全监管平台</div>
|
|
||||||
<div style={{ backgroundImage: `url(${guangImg})` }} className="guang" />
|
|
||||||
<div className="time">
|
|
||||||
{" "}
|
|
||||||
<img src={imgOk} />
|
|
||||||
{" "}
|
|
||||||
企业已连续平安运行 1095 天
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
</CSSTransition>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Header;
|
|
||||||
|
|
@ -1,75 +0,0 @@
|
||||||
.header_container {
|
|
||||||
|
|
||||||
header {
|
|
||||||
width: 100%;
|
|
||||||
height: 70px;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
font-size: 40px;
|
|
||||||
color: #fff;
|
|
||||||
text-align: center;
|
|
||||||
padding-top: 10px;
|
|
||||||
font-weight: bold;
|
|
||||||
position: absolute;
|
|
||||||
|
|
||||||
.back {
|
|
||||||
position: absolute;
|
|
||||||
top: 10px;
|
|
||||||
left: 10px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
background-image: linear-gradient(to bottom, #5bb4f7, #ffffff);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
font-size: 34px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.guang {
|
|
||||||
background-size: 100% 100%;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
width: 707px;
|
|
||||||
height: 85px;
|
|
||||||
position: absolute;
|
|
||||||
top: 25px;
|
|
||||||
left: 50%;
|
|
||||||
animation: headerContainerScale 2s infinite;
|
|
||||||
|
|
||||||
@keyframes headerContainerScale {
|
|
||||||
0% {
|
|
||||||
transform: translateX(-50%) scale(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
50% {
|
|
||||||
transform: translateX(-50%) scale(0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
transform: translateX(-50%) scale(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.time{
|
|
||||||
position: absolute;
|
|
||||||
right: 20px;
|
|
||||||
top: 20px;
|
|
||||||
font-size: 14px;
|
|
||||||
border-style: solid;
|
|
||||||
border-width: 1px;
|
|
||||||
border-color: rgba(12,108,177,0.2);
|
|
||||||
background-image: -moz-linear-gradient( 90deg, rgb(14,26,90) 0%, rgb(16,26,74) 100%);
|
|
||||||
background-image: -webkit-linear-gradient( 90deg, rgb(14,26,90) 0%, rgb(16,26,74) 100%);
|
|
||||||
background-image: -ms-linear-gradient( 90deg, rgb(14,26,90) 0%, rgb(16,26,74) 100%);
|
|
||||||
box-shadow: inset 0px 3px 7px 0px rgba(21, 50, 102, 0.35);
|
|
||||||
font-weight: normal;
|
|
||||||
padding: 5px 10px;
|
|
||||||
border-radius: 20px;
|
|
||||||
color: #ffffff;
|
|
||||||
z-index: 9999;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,146 +0,0 @@
|
||||||
import * as echarts from "echarts";
|
|
||||||
import { textFormatter } from "~/pages/Container/Map/js/utils";
|
|
||||||
|
|
||||||
export const initEcharts1 = (main1Ref, chartInstance, data) => {
|
|
||||||
const XAxisData = [];
|
|
||||||
const seriesData1 = [];
|
|
||||||
const seriesData2 = [];
|
|
||||||
|
|
||||||
data.forEach((e) => {
|
|
||||||
XAxisData.push(e.AREA_NAME);
|
|
||||||
seriesData1.push(Number(e.CAR_IN) + Number(e.PEOPLE_IN));
|
|
||||||
seriesData2.push(Number(e.CAR_OUT) + Number(e.PEOPLE_OUT));
|
|
||||||
});
|
|
||||||
|
|
||||||
chartInstance.current = echarts.init(main1Ref.current);
|
|
||||||
|
|
||||||
const option = {
|
|
||||||
tooltip: {
|
|
||||||
trigger: "axis",
|
|
||||||
axisPointer: {
|
|
||||||
type: "shadow",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
left: "2%",
|
|
||||||
right: "4%",
|
|
||||||
bottom: "5%",
|
|
||||||
top: "10%",
|
|
||||||
containLabel: true,
|
|
||||||
},
|
|
||||||
dataZoom: [
|
|
||||||
{
|
|
||||||
type: "slider",
|
|
||||||
height: 6,
|
|
||||||
bottom: 0,
|
|
||||||
show: true,
|
|
||||||
start: 0,
|
|
||||||
end: 25,
|
|
||||||
handleSize: 3,
|
|
||||||
handleStyle: {
|
|
||||||
color: "#DCE2E8",
|
|
||||||
},
|
|
||||||
xAxisIndex: [0],
|
|
||||||
filterMode: "filter",
|
|
||||||
showDetail: false,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
legend: {
|
|
||||||
top: "0%",
|
|
||||||
right: "0%",
|
|
||||||
textStyle: {
|
|
||||||
color: "#fff",
|
|
||||||
fontSize: 14,
|
|
||||||
},
|
|
||||||
itemWidth: 12,
|
|
||||||
itemHeight: 10,
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: "category",
|
|
||||||
data: XAxisData,
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: "#fff",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
rotate: 0,
|
|
||||||
color: "#fff",
|
|
||||||
fontSize: 14,
|
|
||||||
interval: 0,
|
|
||||||
formatter(value) {
|
|
||||||
return textFormatter(value, 3);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: "value",
|
|
||||||
axisLine: {
|
|
||||||
show: false,
|
|
||||||
lineStyle: {
|
|
||||||
color: "#fff",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
color: "#8c9493",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
fontSize: 14,
|
|
||||||
color: "#fff",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: "进",
|
|
||||||
type: "bar",
|
|
||||||
barWidth: "30%",
|
|
||||||
color: new echarts.graphic.LinearGradient(
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
1,
|
|
||||||
[
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: "#00f0ff",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: "#0066ff",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
false,
|
|
||||||
),
|
|
||||||
data: seriesData1,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "出",
|
|
||||||
type: "bar",
|
|
||||||
barWidth: "30%",
|
|
||||||
color: new echarts.graphic.LinearGradient(
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
1,
|
|
||||||
[
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: "#003cff",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: "#00ff9c",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
false,
|
|
||||||
),
|
|
||||||
data: seriesData2,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
|
|
||||||
chartInstance.current.setOption(option);
|
|
||||||
};
|
|
||||||
|
|
@ -1,173 +0,0 @@
|
||||||
import img9 from "~/assets/images/public/bigScreen/bg9.png";
|
|
||||||
import img8 from "~/assets/images/public/bigScreen/bg10.png";
|
|
||||||
import img7 from "~/assets/images/public/bigScreen/ico3.png";
|
|
||||||
import img1 from "~/assets/images/public/bigScreen/smalltitle.png";
|
|
||||||
import img5 from "~/assets/images/public/bigScreen/tablebg1.png";
|
|
||||||
import img6 from "~/assets/images/public/bigScreen/tablebg2.png";
|
|
||||||
import img3 from "~/assets/images/public/bigScreen/w_ico1.png";
|
|
||||||
import img4 from "~/assets/images/public/bigScreen/w_ico2.png";
|
|
||||||
import img2 from "~/assets/images/public/weather/1.png";
|
|
||||||
import "./index.less";
|
|
||||||
|
|
||||||
function LeftScreen() {
|
|
||||||
return (
|
|
||||||
<div className="left-container">
|
|
||||||
<div className="item">
|
|
||||||
<div className="top" style={{ backgroundImage: `url(${img1})` }}>
|
|
||||||
天气预报情况
|
|
||||||
</div>
|
|
||||||
<div className="main">
|
|
||||||
<div className="list1">
|
|
||||||
<img src={img2} alt="" className="img1" />
|
|
||||||
<div>晴</div>
|
|
||||||
</div>
|
|
||||||
<div className="list1">
|
|
||||||
<img src={img3} alt="" className="img" />
|
|
||||||
<div className="info">
|
|
||||||
<div>温度：</div>
|
|
||||||
<div className="temp">28.5°</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="list1">
|
|
||||||
<img src={img4} alt="" className="img" />
|
|
||||||
<div className="info">
|
|
||||||
<div>风速：</div>
|
|
||||||
<div className="temp">8级</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="info">
|
|
||||||
秦皇岛市气象台发布大风橙色预警[工级/严重]
|
|
||||||
</div>
|
|
||||||
<div className="table">
|
|
||||||
<div className="head" style={{ backgroundImage: `url(${img5})` }}>
|
|
||||||
<div>公司名称</div>
|
|
||||||
<div>处置状态</div>
|
|
||||||
<div>预防措施</div>
|
|
||||||
</div>
|
|
||||||
<div className="table-container" style={{ backgroundImage: `url(${img6})` }}>
|
|
||||||
<div className="table-item">新益公司</div>
|
|
||||||
<div className="table-item fc1">未处置</div>
|
|
||||||
<div className="table-item">远离大树、电线杆、简易房等...</div>
|
|
||||||
</div>
|
|
||||||
<div className="table-container" style={{ backgroundImage: `url(${img6})` }}>
|
|
||||||
<div className="table-item">新益公司</div>
|
|
||||||
<div className="table-item fc2">已处置</div>
|
|
||||||
<div className="table-item">远离大树、电线杆、简易房等...</div>
|
|
||||||
</div>
|
|
||||||
<div className="table-container" style={{ backgroundImage: `url(${img6})` }}>
|
|
||||||
<div className="table-item">新益公司</div>
|
|
||||||
<div className="table-item fc3">处置中</div>
|
|
||||||
<div className="table-item">远离大树、电线杆、简易房等...</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div className=" block2">
|
|
||||||
<div className="top" style={{ backgroundImage: `url(${img1})` }}>
|
|
||||||
重大危险源运行情况
|
|
||||||
</div>
|
|
||||||
<div className="main">
|
|
||||||
<div className="warning">
|
|
||||||
{" "}
|
|
||||||
<img src={img7} alt="" />
|
|
||||||
{" "}
|
|
||||||
北区二号罐液位过低
|
|
||||||
</div>
|
|
||||||
<div className="main_item">
|
|
||||||
<div className="list" style={{ backgroundImage: `url(${img8})` }}>
|
|
||||||
<div className="title">二级重大危险源（1个）</div>
|
|
||||||
<div className="main_con">
|
|
||||||
<div className="item">储罐数：3</div>
|
|
||||||
<div className="item ">再用数：3</div>
|
|
||||||
<div className="item ">
|
|
||||||
停用数：
|
|
||||||
<span className="fcr">2</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="list" style={{ backgroundImage: `url(${img8})` }}>
|
|
||||||
<div className="title">三级重大危险源（2个）</div>
|
|
||||||
<div className="main_con">
|
|
||||||
<div className="item">储罐数：10</div>
|
|
||||||
<div className="item ">再用数：10</div>
|
|
||||||
<div className="item ">
|
|
||||||
停用数：
|
|
||||||
<span className="fcr">0</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="main_item">
|
|
||||||
<div className="list" style={{ backgroundImage: `url(${img9})` }}>
|
|
||||||
<div className="item_list">
|
|
||||||
<div className="info">东罐区二号罐</div>
|
|
||||||
<div className="state">正常</div>
|
|
||||||
</div>
|
|
||||||
<div className="item_list">
|
|
||||||
<div className="info">东罐区二号罐</div>
|
|
||||||
<div className="state fcr">液位低</div>
|
|
||||||
</div>
|
|
||||||
<div className="item_list">
|
|
||||||
<div className="info">东罐区二号罐</div>
|
|
||||||
<div className="state">正常</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div className="list" style={{ backgroundImage: `url(${img9})` }}>
|
|
||||||
<div className="title fcb">报警处置情况</div>
|
|
||||||
<div className="main_con1">
|
|
||||||
<div className="item">温度待处置数/报警个数：0/0 </div>
|
|
||||||
<div className="item ">压力待处置数/报警个数：0/0</div>
|
|
||||||
<div className="item ">液位待处置数/报警个数：1/1</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className=" block3">
|
|
||||||
<div className="top" style={{ backgroundImage: `url(${img1})` }}>
|
|
||||||
领域整改情况统计
|
|
||||||
</div>
|
|
||||||
<div className="main">
|
|
||||||
这里是echart
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="block4">
|
|
||||||
<div className="top" style={{ backgroundImage: `url(${img1})` }}>
|
|
||||||
当前各公司作业中情况
|
|
||||||
</div>
|
|
||||||
<div className="main">
|
|
||||||
<div className="table">
|
|
||||||
<div className="head" style={{ backgroundImage: `url(${img5})` }}>
|
|
||||||
<div>公司名称</div>
|
|
||||||
<div>发现隐患数</div>
|
|
||||||
<div>整改隐患数</div>
|
|
||||||
<div>待整改</div>
|
|
||||||
<div>待验收</div>
|
|
||||||
</div>
|
|
||||||
<div className="table-container" style={{ backgroundImage: `url(${img6})` }}>
|
|
||||||
<div className="table-item">新益公司</div>
|
|
||||||
<div className="table-item">123</div>
|
|
||||||
<div className="table-item">123</div>
|
|
||||||
<div className="table-item">123</div>
|
|
||||||
<div className="table-item">123</div>
|
|
||||||
</div>
|
|
||||||
<div className="table-container" style={{ backgroundImage: `url(${img6})` }}>
|
|
||||||
<div className="table-item">新益公司</div>
|
|
||||||
<div className="table-item">123</div>
|
|
||||||
<div className="table-item">123</div>
|
|
||||||
<div className="table-item">123</div>
|
|
||||||
<div className="table-item">123</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default LeftScreen;
|
|
||||||
|
|
@ -1,261 +0,0 @@
|
||||||
.left-container{
|
|
||||||
width: 360px;
|
|
||||||
height: calc(100vh - 80px);
|
|
||||||
position: absolute;
|
|
||||||
left: 20px;
|
|
||||||
top: 60px;
|
|
||||||
.item{
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.top{
|
|
||||||
color: #ffffff;
|
|
||||||
font-weight: bold;
|
|
||||||
padding-left: 30px;
|
|
||||||
width: 360px;
|
|
||||||
height: 30px;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
}
|
|
||||||
.main{
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-top: 10px;
|
|
||||||
|
|
||||||
.list1{
|
|
||||||
display: flex;
|
|
||||||
color: #ffffff;
|
|
||||||
align-items: center;
|
|
||||||
width: 33%;
|
|
||||||
text-align: center;
|
|
||||||
.img1{
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.img{
|
|
||||||
width: 42px;
|
|
||||||
height: 42px;
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
.temp{
|
|
||||||
font-size: 18px;
|
|
||||||
color: #00e7ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
.info{
|
|
||||||
color: #fe9e00;
|
|
||||||
font-weight: bold;
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table{
|
|
||||||
width: 360px;
|
|
||||||
margin-top: 10px;
|
|
||||||
|
|
||||||
.head{
|
|
||||||
width: 360px;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr 2fr;
|
|
||||||
color: #ffffff;
|
|
||||||
padding: 5px;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
.table-container{
|
|
||||||
width: 360px;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr 2fr;
|
|
||||||
color: #ffffff;
|
|
||||||
padding: 5px;
|
|
||||||
font-size: 12px;
|
|
||||||
margin: 5px auto;
|
|
||||||
|
|
||||||
.fc1{
|
|
||||||
color: #0c90ff;
|
|
||||||
}
|
|
||||||
.fc2{
|
|
||||||
color: #62b13f;
|
|
||||||
}
|
|
||||||
.fc3{
|
|
||||||
color: #ffa105;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.block2{
|
|
||||||
width: 100%;
|
|
||||||
margin-top: 10px;
|
|
||||||
.top{
|
|
||||||
color: #ffffff;
|
|
||||||
font-weight: bold;
|
|
||||||
padding-left: 30px;
|
|
||||||
width: 360px;
|
|
||||||
height: 30px;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
}
|
|
||||||
.main{
|
|
||||||
.warning{
|
|
||||||
width: 100%;
|
|
||||||
border-style: solid;
|
|
||||||
border-width: 1px;
|
|
||||||
border-color: rgb(255, 0, 0,0.5);
|
|
||||||
border-radius: 2px;
|
|
||||||
background-color: rgba(16, 36, 93, 0.659);
|
|
||||||
color: #ffffff;
|
|
||||||
padding: 5px;
|
|
||||||
vertical-align: middle;
|
|
||||||
font-weight: bold;
|
|
||||||
margin: 10px auto;
|
|
||||||
}
|
|
||||||
.mt10{
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
.main_item{
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
.list{
|
|
||||||
width: 48%;
|
|
||||||
height: 91px;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
padding: 5px;
|
|
||||||
color: #ffffff;
|
|
||||||
.title{
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
.main_con{
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
|
|
||||||
.item{
|
|
||||||
width: 50%;
|
|
||||||
margin: 2px 0;
|
|
||||||
font-size: 12px;
|
|
||||||
.fcr{
|
|
||||||
color: #f90102;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
.fcb{
|
|
||||||
color: #00aeff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main_con1{
|
|
||||||
.item{
|
|
||||||
width: 100%;
|
|
||||||
margin: 2px 0;
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 22px;
|
|
||||||
.fcr{
|
|
||||||
color: #f90102;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.item_list{
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
border-bottom: 1px solid #163682;
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 30px;
|
|
||||||
|
|
||||||
.info{
|
|
||||||
width: 60%;
|
|
||||||
}
|
|
||||||
.state{
|
|
||||||
width: 40%;
|
|
||||||
text-align: right;
|
|
||||||
color: #7ccf41;
|
|
||||||
}
|
|
||||||
.fcr{
|
|
||||||
color: #f90102;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
.block3{
|
|
||||||
width: 100%;
|
|
||||||
margin-top: 20px;
|
|
||||||
.top{
|
|
||||||
color: #ffffff;
|
|
||||||
font-weight: bold;
|
|
||||||
padding-left: 30px;
|
|
||||||
width: 360px;
|
|
||||||
height: 30px;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
}
|
|
||||||
.main{
|
|
||||||
width: 360px;
|
|
||||||
height: 100px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.block4{
|
|
||||||
width: 100%;
|
|
||||||
margin-top: 20px;
|
|
||||||
.top{
|
|
||||||
color: #ffffff;
|
|
||||||
font-weight: bold;
|
|
||||||
padding-left: 30px;
|
|
||||||
width: 360px;
|
|
||||||
height: 30px;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
}
|
|
||||||
.main{
|
|
||||||
width: 360px;
|
|
||||||
.table{
|
|
||||||
width: 360px;
|
|
||||||
margin-top: 10px;
|
|
||||||
|
|
||||||
.head{
|
|
||||||
width: 360px;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
|
||||||
color: #ffffff;
|
|
||||||
padding: 5px;
|
|
||||||
font-size: 12px;
|
|
||||||
background: rgba(39,101,175,0.5);
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.table-container{
|
|
||||||
width: 360px;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
|
||||||
color: #ffffff;
|
|
||||||
padding: 5px;
|
|
||||||
font-size: 12px;
|
|
||||||
margin: 5px auto;
|
|
||||||
background: rgba(17,51,122,0.5);
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
.fc1{
|
|
||||||
color: #0c90ff;
|
|
||||||
}
|
|
||||||
.fc2{
|
|
||||||
color: #62b13f;
|
|
||||||
}
|
|
||||||
.fc3{
|
|
||||||
color: #ffa105;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -1,209 +0,0 @@
|
||||||
import img8 from "~/assets/images/public/bigScreen/bg11.png";
|
|
||||||
import img9 from "~/assets/images/public/bigScreen/bg12.png";
|
|
||||||
import img2 from "~/assets/images/public/bigScreen/ico6.png";
|
|
||||||
import img3 from "~/assets/images/public/bigScreen/ico7.png";
|
|
||||||
import img4 from "~/assets/images/public/bigScreen/ico8.png";
|
|
||||||
import img7 from "~/assets/images/public/bigScreen/ico9.png";
|
|
||||||
import img1 from "~/assets/images/public/bigScreen/smalltitle.png";
|
|
||||||
import img5 from "~/assets/images/public/bigScreen/tablebg1.png";
|
|
||||||
import img6 from "~/assets/images/public/bigScreen/tablebg2.png";
|
|
||||||
import "./index.less";
|
|
||||||
|
|
||||||
function RightScreen() {
|
|
||||||
return (
|
|
||||||
<div className="right-container">
|
|
||||||
<div className="block1">
|
|
||||||
<div className="top" style={{ backgroundImage: `url(${img1})` }}>
|
|
||||||
相关方申请审批管理
|
|
||||||
</div>
|
|
||||||
<div className="main">
|
|
||||||
<div className="table">
|
|
||||||
<div className="head" style={{ backgroundImage: `url(${img5})` }}>
|
|
||||||
<div>单位名称</div>
|
|
||||||
<div>待审批项目数</div>
|
|
||||||
<div>待提交培训人员数</div>
|
|
||||||
<div>待培训人数</div>
|
|
||||||
</div>
|
|
||||||
<div className="table-container" style={{ backgroundImage: `url(${img6})` }}>
|
|
||||||
<div className="table-item">方宇物业</div>
|
|
||||||
<div className="table-item">2</div>
|
|
||||||
<div className="table-item">3</div>
|
|
||||||
<div className="table-item">4</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div className="table-container" style={{ backgroundImage: `url(${img6})` }}>
|
|
||||||
<div className="table-item">方宇物业</div>
|
|
||||||
<div className="table-item">2</div>
|
|
||||||
<div className="table-item">3</div>
|
|
||||||
<div className="table-item">4</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div className="table-container" style={{ backgroundImage: `url(${img6})` }}>
|
|
||||||
<div className="table-item">方宇物业</div>
|
|
||||||
<div className="table-item">2</div>
|
|
||||||
<div className="table-item">3</div>
|
|
||||||
<div className="table-item">4</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div className="table-container" style={{ backgroundImage: `url(${img6})` }}>
|
|
||||||
<div className="table-item">方宇物业</div>
|
|
||||||
<div className="table-item">2</div>
|
|
||||||
<div className="table-item">3</div>
|
|
||||||
<div className="table-item">4</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div className=" block2">
|
|
||||||
<div className="top" style={{ backgroundImage: `url(${img1})` }}>
|
|
||||||
当前重点作业统计
|
|
||||||
</div>
|
|
||||||
<div className="main">
|
|
||||||
<div className="item">
|
|
||||||
<div className="img">
|
|
||||||
<img src={img2} alt="" />
|
|
||||||
</div>
|
|
||||||
<div className="info">
|
|
||||||
<div className="title">三人以上作业</div>
|
|
||||||
<div>
|
|
||||||
<p> 当前作业数：13</p>
|
|
||||||
<p>申请数：14</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="item">
|
|
||||||
<div className="img">
|
|
||||||
<img src={img3} alt="" />
|
|
||||||
</div>
|
|
||||||
<div className="info">
|
|
||||||
<div className="title">危险作业</div>
|
|
||||||
<div>
|
|
||||||
<p> 当前作业数：13</p>
|
|
||||||
<p>申请数：14</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="item">
|
|
||||||
<div className="img">
|
|
||||||
<img src={img4} alt="" />
|
|
||||||
</div>
|
|
||||||
<div className="info">
|
|
||||||
<div className="title">夜间作业</div>
|
|
||||||
<div>
|
|
||||||
<p> 当前作业数：13</p>
|
|
||||||
<p>申请数：14</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="item">
|
|
||||||
<div className="img">
|
|
||||||
<img src={img7} alt="" />
|
|
||||||
</div>
|
|
||||||
<div className="info">
|
|
||||||
<div className="title">四新作业</div>
|
|
||||||
<div>
|
|
||||||
<p> 当前作业数：13</p>
|
|
||||||
<p>申请数：14</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className=" block3">
|
|
||||||
<div className="top" style={{ backgroundImage: `url(${img1})` }}>
|
|
||||||
当前口门、封闭区情况
|
|
||||||
</div>
|
|
||||||
<div className="main">
|
|
||||||
<div className="item" style={{ backgroundImage: `url(${img9})` }}>
|
|
||||||
<div className="title">一级口门进出统计</div>
|
|
||||||
<div className="num">
|
|
||||||
<div>人数：2100</div>
|
|
||||||
<div>车数：1125</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="item" style={{ backgroundImage: `url(${img9})` }}>
|
|
||||||
<div className="title">进入申请待审批</div>
|
|
||||||
<div className="num">
|
|
||||||
<div>人数：2100</div>
|
|
||||||
<div>车数：1125</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="item" style={{ backgroundImage: `url(${img8})` }}>
|
|
||||||
<div className="title">封闭区域人员情况</div>
|
|
||||||
<div className="num">
|
|
||||||
<div>人数：2100</div>
|
|
||||||
<div>车数：1125</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="item" style={{ backgroundImage: `url(${img8})` }}>
|
|
||||||
<div className="title">封闭区域作业情况</div>
|
|
||||||
<div className="num">
|
|
||||||
<div>人数：2100</div>
|
|
||||||
<div>车数：1125</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="block4">
|
|
||||||
<div className="top" style={{ backgroundImage: `url(${img1})` }}>
|
|
||||||
物联网设备报警情况
|
|
||||||
</div>
|
|
||||||
<div className="main">
|
|
||||||
<div className="table">
|
|
||||||
<div className="head" style={{ backgroundImage: `url(${img5})` }}>
|
|
||||||
<div>公司名称</div>
|
|
||||||
<div>检测系统</div>
|
|
||||||
<div>报警原因</div>
|
|
||||||
<div>处置状态</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="table-container" style={{ backgroundImage: `url(${img6})` }}>
|
|
||||||
<div className="table-item">新益公司</div>
|
|
||||||
<div className="table-item">火灾检测系统</div>
|
|
||||||
<div className="table-item">燃气泄露</div>
|
|
||||||
<div className="table-item">未处置</div>
|
|
||||||
</div>
|
|
||||||
<div className="table-container" style={{ backgroundImage: `url(${img6})` }}>
|
|
||||||
<div className="table-item">新益公司</div>
|
|
||||||
<div className="table-item">火灾检测系统</div>
|
|
||||||
<div className="table-item">燃气泄露</div>
|
|
||||||
<div className="table-item">未处置</div>
|
|
||||||
</div>
|
|
||||||
<div className="table-container" style={{ backgroundImage: `url(${img6})` }}>
|
|
||||||
<div className="table-item">新益公司</div>
|
|
||||||
<div className="table-item">火灾检测系统</div>
|
|
||||||
<div className="table-item">燃气泄露</div>
|
|
||||||
<div className="table-item">未处置</div>
|
|
||||||
</div>
|
|
||||||
<div className="table-container" style={{ backgroundImage: `url(${img6})` }}>
|
|
||||||
<div className="table-item">新益公司</div>
|
|
||||||
<div className="table-item">火灾检测系统</div>
|
|
||||||
<div className="table-item">燃气泄露</div>
|
|
||||||
<div className="table-item">未处置</div>
|
|
||||||
</div>
|
|
||||||
<div className="table-container" style={{ backgroundImage: `url(${img6})` }}>
|
|
||||||
<div className="table-item">新益公司</div>
|
|
||||||
<div className="table-item">火灾检测系统</div>
|
|
||||||
<div className="table-item">燃气泄露</div>
|
|
||||||
<div className="table-item">未处置</div>
|
|
||||||
</div>
|
|
||||||
<div className="table-container" style={{ backgroundImage: `url(${img6})` }}>
|
|
||||||
<div className="table-item">新益公司</div>
|
|
||||||
<div className="table-item">火灾检测系统</div>
|
|
||||||
<div className="table-item">燃气泄露</div>
|
|
||||||
<div className="table-item">未处置</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default RightScreen;
|
|
||||||
|
|
@ -1,205 +0,0 @@
|
||||||
.right-container{
|
|
||||||
width: 360px;
|
|
||||||
height: calc(100vh - 80px);
|
|
||||||
position: absolute;
|
|
||||||
right: 20px;
|
|
||||||
top: 60px;
|
|
||||||
.block1{
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.top{
|
|
||||||
color: #ffffff;
|
|
||||||
font-weight: bold;
|
|
||||||
padding-left: 30px;
|
|
||||||
width: 360px;
|
|
||||||
height: 30px;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
}
|
|
||||||
.main{
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
|
|
||||||
.table{
|
|
||||||
width: 360px;
|
|
||||||
margin-top: 10px;
|
|
||||||
|
|
||||||
.head{
|
|
||||||
width: 360px;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr 1.5fr 1fr ;
|
|
||||||
color: #ffffff;
|
|
||||||
padding: 5px;
|
|
||||||
font-size: 12px;
|
|
||||||
background: rgba(39,101,175,0.5);
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.table-container{
|
|
||||||
width: 360px;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr 1.5fr 1fr ;
|
|
||||||
color: #ffffff;
|
|
||||||
padding: 5px;
|
|
||||||
font-size: 12px;
|
|
||||||
margin: 5px auto;
|
|
||||||
background: rgba(17,51,122,0.5);
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
.fc1{
|
|
||||||
color: #0c90ff;
|
|
||||||
}
|
|
||||||
.fc2{
|
|
||||||
color: #62b13f;
|
|
||||||
}
|
|
||||||
.fc3{
|
|
||||||
color: #ffa105;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.block2{
|
|
||||||
width: 100%;
|
|
||||||
margin-top: 10px;
|
|
||||||
.top{
|
|
||||||
color: #ffffff;
|
|
||||||
font-weight: bold;
|
|
||||||
padding-left: 30px;
|
|
||||||
width: 360px;
|
|
||||||
height: 30px;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
}
|
|
||||||
.main{
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
.item{
|
|
||||||
width: 50%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-top: 10px;
|
|
||||||
.title{
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info{
|
|
||||||
padding-left: 10px;
|
|
||||||
width: 100%;
|
|
||||||
color: #ffffff;
|
|
||||||
font-size: 12px;
|
|
||||||
p{
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
.block3{
|
|
||||||
width: 100%;
|
|
||||||
margin-top: 20px;
|
|
||||||
.top{
|
|
||||||
color: #ffffff;
|
|
||||||
font-weight: bold;
|
|
||||||
padding-left: 30px;
|
|
||||||
width: 360px;
|
|
||||||
height: 30px;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
}
|
|
||||||
.main{
|
|
||||||
width: 360px;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: space-between;
|
|
||||||
.item{
|
|
||||||
width: 49%;
|
|
||||||
text-align: center;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
color: #ffffff;
|
|
||||||
padding:5px 10px;
|
|
||||||
font-size: 12px;
|
|
||||||
margin-top: 10px;
|
|
||||||
|
|
||||||
.title{
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
.num{
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin-top: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.block4{
|
|
||||||
width: 100%;
|
|
||||||
margin-top: 20px;
|
|
||||||
.top{
|
|
||||||
color: #ffffff;
|
|
||||||
font-weight: bold;
|
|
||||||
padding-left: 30px;
|
|
||||||
width: 360px;
|
|
||||||
height: 30px;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
}
|
|
||||||
.main{
|
|
||||||
width: 360px;
|
|
||||||
.table{
|
|
||||||
width: 360px;
|
|
||||||
margin-top: 10px;
|
|
||||||
|
|
||||||
.head{
|
|
||||||
width: 360px;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr 1fr 1fr ;
|
|
||||||
color: #ffffff;
|
|
||||||
padding: 5px;
|
|
||||||
font-size: 12px;
|
|
||||||
background: rgba(39,101,175,0.5);
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.table-container{
|
|
||||||
width: 360px;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr 1fr 1fr ;
|
|
||||||
color: #ffffff;
|
|
||||||
padding: 5px;
|
|
||||||
font-size: 12px;
|
|
||||||
margin: 5px auto;
|
|
||||||
background: rgba(17,51,122,0.5);
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
.fc1{
|
|
||||||
color: #0c90ff;
|
|
||||||
}
|
|
||||||
.fc2{
|
|
||||||
color: #62b13f;
|
|
||||||
}
|
|
||||||
.fc3{
|
|
||||||
color: #ffa105;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -1,83 +0,0 @@
|
||||||
.search_container{
|
|
||||||
width: 214px;
|
|
||||||
min-height: 200px;
|
|
||||||
position: absolute;
|
|
||||||
top: 100px;
|
|
||||||
left: 400px;
|
|
||||||
background: rgba(0,41,82,0.68);
|
|
||||||
border-radius: 4px;
|
|
||||||
border: 1px solid rgba(44,105,172,0.6);
|
|
||||||
.top{
|
|
||||||
width: 214px;
|
|
||||||
height: 37px;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
display: flex;
|
|
||||||
padding: 5px;
|
|
||||||
position: relative;
|
|
||||||
.list{
|
|
||||||
color: #ffffff;
|
|
||||||
padding: 2px 8px;
|
|
||||||
cursor: pointer;
|
|
||||||
&:hover{
|
|
||||||
border-radius: 2px;
|
|
||||||
background-color: rgba(36, 115, 239, 0.549);
|
|
||||||
box-shadow: 0 1px 1px 0 rgba(2, 32, 95, 0.4);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.active{
|
|
||||||
border-radius: 2px;
|
|
||||||
background-color: rgba(36, 115, 239, 0.549);
|
|
||||||
box-shadow: 0 1px 1px 0 rgba(2, 32, 95, 0.4);
|
|
||||||
}
|
|
||||||
.close{
|
|
||||||
position: absolute;
|
|
||||||
top: 5px;
|
|
||||||
right: 10px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.search_con{
|
|
||||||
background: rgba(5,40,106,0.68);
|
|
||||||
height: 30px;
|
|
||||||
border: 1px solid rgba(23,86,168,0.68);
|
|
||||||
margin:5px;
|
|
||||||
border-radius: 4px;
|
|
||||||
color: #4371af;
|
|
||||||
line-height: 30px;
|
|
||||||
padding-left: 5px;
|
|
||||||
font-size: 12px;
|
|
||||||
.input{
|
|
||||||
border: none;
|
|
||||||
background: none;
|
|
||||||
width: 100%;
|
|
||||||
height: 30px;
|
|
||||||
outline: none;
|
|
||||||
color: #ffffff;
|
|
||||||
&::-webkit-input-placeholder{
|
|
||||||
color: #4371af;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
.con{
|
|
||||||
width: 100%;
|
|
||||||
.item{
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
font-size: 12px;
|
|
||||||
color: #ffffff;
|
|
||||||
padding: 5px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
border-bottom: 1px dashed #205376;
|
|
||||||
align-items: center;
|
|
||||||
.btn{
|
|
||||||
border-radius: 4px;
|
|
||||||
background-color: rgba(36, 115, 239, 0.2);
|
|
||||||
padding:2px 5px;
|
|
||||||
border: 1px solid rgba(42,86,158,0.58);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,23 +0,0 @@
|
||||||
import Bottom from "~/pages/Container/Bi/components/Bottom/index";
|
|
||||||
import LeftPanel from "~/pages/Container/Bi/components/LeftPanel/index";
|
|
||||||
import RightPanel from "~/pages/Container/Bi/components/RightPanel/index";
|
|
||||||
import Search from "~/pages/Container/Bi/components/Search/index";
|
|
||||||
import backgroundimg from "../../../assets/images/public/bigScreen/backgroundimg.jpg";
|
|
||||||
import Header from "../Bi/components/Header/index";
|
|
||||||
import "./index.less";
|
|
||||||
|
|
||||||
function BiScreen() {
|
|
||||||
return (
|
|
||||||
<div className="screen-container" style={{ backgroundImage: `url(${backgroundimg})` }}>
|
|
||||||
<Header />
|
|
||||||
<div className="screen-content">
|
|
||||||
<LeftPanel />
|
|
||||||
<RightPanel />
|
|
||||||
<Bottom />
|
|
||||||
<Search />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default BiScreen;
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
.screen-container{
|
|
||||||
width: 100vw;
|
|
||||||
height: 100vh;
|
|
||||||
.screen-content{
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,7 +1,8 @@
|
||||||
|
import AliPlayer from "zy-react-library/components/Video/AliPlayer";
|
||||||
import img2 from "~/assets/images/public/bigScreen/bg13.png";
|
import img2 from "~/assets/images/public/bigScreen/bg13.png";
|
||||||
import img3 from "~/assets/images/public/bigScreen/bg14.png";
|
import img3 from "~/assets/images/public/bigScreen/bg14.png";
|
||||||
import img4 from "~/assets/images/public/bigScreen/more1.png";
|
import img4 from "~/assets/images/public/bigScreen/more1.png";
|
||||||
import img1 from "~/assets/images/public/bigScreen/smalltitle.png";
|
import Title from "~/pages/Container/Map/components/Content/IndexInfo/Title";
|
||||||
import "./index.less";
|
import "./index.less";
|
||||||
|
|
||||||
function BottomScreen() {
|
function BottomScreen() {
|
||||||
|
|
@ -26,7 +27,7 @@ function BottomScreen() {
|
||||||
</div>
|
</div>
|
||||||
<div className="bottom-container">
|
<div className="bottom-container">
|
||||||
<div className="left">
|
<div className="left">
|
||||||
<div className="title" style={{ backgroundImage: `url(${img1})` }}>分子公司考核情况</div>
|
<Title title="分子公司考核情况" />
|
||||||
<div className="main" style={{ backgroundImage: `url(${img2})` }}>
|
<div className="main" style={{ backgroundImage: `url(${img2})` }}>
|
||||||
<div className="table">
|
<div className="table">
|
||||||
<div className="head">
|
<div className="head">
|
||||||
|
|
@ -69,7 +70,7 @@ function BottomScreen() {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="right">
|
<div className="right">
|
||||||
<div className="title" style={{ backgroundImage: `url(${img1})` }}>视频巡屏</div>
|
<Title title="视频巡屏" />
|
||||||
<div className="main">
|
<div className="main">
|
||||||
<div className="menu">
|
<div className="menu">
|
||||||
<div className="list active">新益公司</div>
|
<div className="list active">新益公司</div>
|
||||||
|
|
@ -79,13 +80,12 @@ function BottomScreen() {
|
||||||
<div className="list">九公司</div>
|
<div className="list">九公司</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="video-container" style={{ backgroundImage: `url(${img3})` }}>
|
<div className="video-container" style={{ backgroundImage: `url(${img3})` }}>
|
||||||
这里是视频
|
<AliPlayer source="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4" height="100%" isLive />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -0,0 +1,157 @@
|
||||||
|
.index_info_container {
|
||||||
|
.bottom-container_con {
|
||||||
|
width: 1120px;
|
||||||
|
height: 240px;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 35px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
|
||||||
|
.top_container {
|
||||||
|
display: flex;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 12px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
background: #074abe;
|
||||||
|
color: #ffffff;
|
||||||
|
padding: 5px 10px;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.con {
|
||||||
|
display: flex;
|
||||||
|
background: rgba(1, 50, 115, 0.5);
|
||||||
|
line-height: 30px;
|
||||||
|
margin-left: 2px;
|
||||||
|
|
||||||
|
.item {
|
||||||
|
padding: 0 10px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
background: #011d41;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
background: #011d41;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.left {
|
||||||
|
width: 670px;
|
||||||
|
background: rgba(0, 41, 82, 0.68);
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid rgba(44, 105, 172, 0.6);
|
||||||
|
|
||||||
|
.main {
|
||||||
|
width: 670px;
|
||||||
|
height: 160px;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin-top: 10px;
|
||||||
|
color: #ffffff;
|
||||||
|
|
||||||
|
.table {
|
||||||
|
margin-top: 10px;
|
||||||
|
|
||||||
|
.head {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
||||||
|
color: #ffffff;
|
||||||
|
padding: 10px 5px;
|
||||||
|
font-size: 12px;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-container {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
||||||
|
color: #ffffff;
|
||||||
|
padding: 5px;
|
||||||
|
font-size: 12px;
|
||||||
|
margin: 0px auto;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.fc1 {
|
||||||
|
color: #0c90ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc2 {
|
||||||
|
color: #62b13f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc3 {
|
||||||
|
color: #ffa105;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: rgba(14, 197, 208, 0.1);
|
||||||
|
box-shadow: 0 0 1px #00e7ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
width: 440px;
|
||||||
|
background: rgba(0, 41, 82, 0.68);
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid rgba(44, 105, 172, 0.6);
|
||||||
|
|
||||||
|
.main {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 10px;
|
||||||
|
|
||||||
|
.menu {
|
||||||
|
width: 120px;
|
||||||
|
border-radius: 5px;
|
||||||
|
background-color: rgb(13, 56, 119);
|
||||||
|
box-shadow: inset 0px 2px 2px 0px rgba(35, 24, 21, 0.17);
|
||||||
|
height: 180px;
|
||||||
|
color: #ffffff;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 30px;
|
||||||
|
padding: 5px;
|
||||||
|
|
||||||
|
.list {
|
||||||
|
border-radius: 5px;
|
||||||
|
background-color: rgba(18, 96, 181, 0.4);
|
||||||
|
box-shadow: 0 2px 1px 0 rgba(2, 32, 95, 0.4);
|
||||||
|
margin-bottom: 5px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-radius: 5px;
|
||||||
|
background-color: rgb(18, 96, 181);
|
||||||
|
box-shadow: 0px 2px 1px 0px rgba(2, 32, 95, 0.4);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
border-radius: 5px;
|
||||||
|
background-color: rgb(18, 96, 181);
|
||||||
|
box-shadow: 0px 2px 1px 0px rgba(2, 32, 95, 0.4);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-container {
|
||||||
|
flex: 1;
|
||||||
|
margin-left: 10px;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,165 @@
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
|
||||||
|
export const initEcharts1 = (main1Ref, chartInstance, data) => {
|
||||||
|
chartInstance.current = echarts.init(main1Ref.current);
|
||||||
|
|
||||||
|
const companyNames = data.map(item => item.name);
|
||||||
|
const hazardCounts = data.map(item => item.hazardCount);
|
||||||
|
const unrectifiedCounts = data.map(item => item.unrectifiedCount);
|
||||||
|
const rectificationRates = data.map(item => item.rectificationRate);
|
||||||
|
|
||||||
|
const option = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
axisPointer: {
|
||||||
|
type: "shadow",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: "10%",
|
||||||
|
top: "28%",
|
||||||
|
right: "10%",
|
||||||
|
bottom: "25%",
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ["隐患数量", "未整改数量", "整改率"],
|
||||||
|
top: "0%",
|
||||||
|
right: "3%",
|
||||||
|
textStyle: {
|
||||||
|
color: "#FFFFFF",
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
dataZoom: [
|
||||||
|
{
|
||||||
|
type: "slider",
|
||||||
|
height: 6,
|
||||||
|
bottom: "7%",
|
||||||
|
show: true,
|
||||||
|
start: 0,
|
||||||
|
end: 40,
|
||||||
|
handleSize: 5,
|
||||||
|
handleStyle: {
|
||||||
|
color: "#DCE2E8",
|
||||||
|
},
|
||||||
|
xAxisIndex: [0],
|
||||||
|
filterMode: "filter",
|
||||||
|
showDetail: false,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
xAxis: {
|
||||||
|
data: companyNames,
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
alignWithLabel: true,
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
color: "#FFFFFF",
|
||||||
|
fontSize: 12,
|
||||||
|
margin: 12,
|
||||||
|
interval: 0,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: "value",
|
||||||
|
name: "数量",
|
||||||
|
nameTextStyle: {
|
||||||
|
color: "#FFFFFF",
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: "#000000",
|
||||||
|
type: "solid",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
color: "#FFFFFF",
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "value",
|
||||||
|
name: "整改率(%)",
|
||||||
|
nameTextStyle: {
|
||||||
|
color: "#FFFFFF",
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
min: 0,
|
||||||
|
max: 100,
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
color: "#FFFFFF",
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "隐患数量",
|
||||||
|
type: "bar",
|
||||||
|
barWidth: 10,
|
||||||
|
yAxisIndex: 0,
|
||||||
|
itemStyle: {
|
||||||
|
color: "#C5993B",
|
||||||
|
},
|
||||||
|
data: hazardCounts,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "未整改数量",
|
||||||
|
type: "bar",
|
||||||
|
barWidth: 10,
|
||||||
|
yAxisIndex: 0,
|
||||||
|
itemStyle: {
|
||||||
|
color: "#FF0606",
|
||||||
|
},
|
||||||
|
data: unrectifiedCounts,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "整改率",
|
||||||
|
type: "line",
|
||||||
|
yAxisIndex: 1,
|
||||||
|
showAllSymbol: true,
|
||||||
|
symbol: "circle",
|
||||||
|
symbolSize: 10,
|
||||||
|
itemStyle: {
|
||||||
|
color: "#33FFFF",
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: "top",
|
||||||
|
formatter: "{c}%",
|
||||||
|
color: "#FFFFCC",
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
color: "#33FFFF",
|
||||||
|
shadowBlur: 1,
|
||||||
|
},
|
||||||
|
z: 18,
|
||||||
|
data: rectificationRates,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
chartInstance.current.setOption(option);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,209 @@
|
||||||
|
import { useMount } from "ahooks";
|
||||||
|
import { useRef, useState } from "react";
|
||||||
|
import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
|
||||||
|
import img9 from "~/assets/images/public/bigScreen/bg9.png";
|
||||||
|
import img8 from "~/assets/images/public/bigScreen/bg10.png";
|
||||||
|
import img7 from "~/assets/images/public/bigScreen/ico3.png";
|
||||||
|
import img5 from "~/assets/images/public/bigScreen/tablebg1.png";
|
||||||
|
import img6 from "~/assets/images/public/bigScreen/tablebg2.png";
|
||||||
|
import img3 from "~/assets/images/public/bigScreen/w_ico1.png";
|
||||||
|
import img4 from "~/assets/images/public/bigScreen/w_ico2.png";
|
||||||
|
import img2 from "~/assets/images/public/weather/1.png";
|
||||||
|
import Title from "~/pages/Container/Map/components/Content/IndexInfo/Title";
|
||||||
|
import { initEcharts1 } from "./echarts";
|
||||||
|
import "./index.less";
|
||||||
|
|
||||||
|
function LeftScreen() {
|
||||||
|
const [block1List, setBlock1List] = useState([
|
||||||
|
{ id: 1, companyName: "新益公司", status: 0, preventiveMeasures: "远离大树、电线杆、简易房等..." },
|
||||||
|
{ id: 2, companyName: "华泰化工", status: 1, preventiveMeasures: "加固设备、检查管道连接..." },
|
||||||
|
{ id: 3, companyName: "宏达制造", status: 2, preventiveMeasures: "暂停户外作业、检查电气设备..." },
|
||||||
|
{ id: 4, companyName: "金鼎能源", status: 0, preventiveMeasures: "关闭通风设备、加强监测..." },
|
||||||
|
{ id: 5, companyName: "瑞丰新材料", status: 1, preventiveMeasures: "疏散人员、设置警戒线..." },
|
||||||
|
{ id: 6, companyName: "恒通物流", status: 2, preventiveMeasures: "暂停运输作业、固定货物..." },
|
||||||
|
{ id: 7, companyName: "天成建筑", status: 0, preventiveMeasures: "停止高空作业、加固脚手架..." },
|
||||||
|
{ id: 8, companyName: "绿源环保", status: 1, preventiveMeasures: "启动应急预案、检测环境指标..." },
|
||||||
|
{ id: 9, companyName: "安泰消防", status: 2, preventiveMeasures: "配备消防器材、加强巡查..." },
|
||||||
|
{ id: 10, companyName: "创新科技", status: 0, preventiveMeasures: "断电保护、转移重要设备..." },
|
||||||
|
]);
|
||||||
|
const [block4List, setBlock4List] = useState([
|
||||||
|
{ id: 1, companyName: "新益公司", foundHazards: 123, resolvedHazards: 120, pendingResolution: 2, pendingAcceptance: 1 },
|
||||||
|
{ id: 2, companyName: "华泰化工", foundHazards: 85, resolvedHazards: 80, pendingResolution: 3, pendingAcceptance: 2 },
|
||||||
|
{ id: 3, companyName: "宏达制造", foundHazards: 67, resolvedHazards: 65, pendingResolution: 1, pendingAcceptance: 1 },
|
||||||
|
{ id: 4, companyName: "金鼎能源", foundHazards: 156, resolvedHazards: 145, pendingResolution: 8, pendingAcceptance: 3 },
|
||||||
|
{ id: 5, companyName: "瑞丰新材料", foundHazards: 42, resolvedHazards: 40, pendingResolution: 1, pendingAcceptance: 1 },
|
||||||
|
{ id: 6, companyName: "恒通物流", foundHazards: 78, resolvedHazards: 75, pendingResolution: 2, pendingAcceptance: 1 },
|
||||||
|
{ id: 7, companyName: "天成建筑", foundHazards: 93, resolvedHazards: 88, pendingResolution: 4, pendingAcceptance: 1 },
|
||||||
|
{ id: 8, companyName: "绿源环保", foundHazards: 56, resolvedHazards: 54, pendingResolution: 1, pendingAcceptance: 1 },
|
||||||
|
{ id: 9, companyName: "安泰消防", foundHazards: 112, resolvedHazards: 110, pendingResolution: 1, pendingAcceptance: 1 },
|
||||||
|
{ id: 10, companyName: "创新科技", foundHazards: 71, resolvedHazards: 69, pendingResolution: 1, pendingAcceptance: 1 },
|
||||||
|
]);
|
||||||
|
|
||||||
|
const chartInstance = useRef(null);
|
||||||
|
const main1Ref = useRef(null);
|
||||||
|
|
||||||
|
useMount(() => {
|
||||||
|
initEcharts1(main1Ref, chartInstance, [
|
||||||
|
{ name: "新益公司", hazardCount: 123, unrectifiedCount: 23, rectificationRate: 81.3 },
|
||||||
|
{ name: "华泰化工", hazardCount: 85, unrectifiedCount: 15, rectificationRate: 82.4 },
|
||||||
|
{ name: "宏达制造", hazardCount: 67, unrectifiedCount: 12, rectificationRate: 82.1 },
|
||||||
|
{ name: "金鼎能源", hazardCount: 156, unrectifiedCount: 32, rectificationRate: 79.5 },
|
||||||
|
{ name: "瑞丰新材料", hazardCount: 42, unrectifiedCount: 8, rectificationRate: 81.0 },
|
||||||
|
{ name: "恒通物流", hazardCount: 78, unrectifiedCount: 18, rectificationRate: 76.9 },
|
||||||
|
{ name: "天成建筑", hazardCount: 93, unrectifiedCount: 23, rectificationRate: 75.3 },
|
||||||
|
{ name: "绿源环保", hazardCount: 56, unrectifiedCount: 11, rectificationRate: 80.4 },
|
||||||
|
{ name: "安泰消防", hazardCount: 112, unrectifiedCount: 22, rectificationRate: 80.4 },
|
||||||
|
{ name: "创新科技", hazardCount: 71, unrectifiedCount: 16, rectificationRate: 77.5 },
|
||||||
|
]);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
if (chartInstance.current) {
|
||||||
|
chartInstance.current.dispose();
|
||||||
|
chartInstance.current = null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="left-container">
|
||||||
|
<div className="block1">
|
||||||
|
<Title title="天气预报情况" />
|
||||||
|
<div className="main">
|
||||||
|
<div className="list1">
|
||||||
|
<img src={img2} alt="" className="img1" />
|
||||||
|
<div>晴</div>
|
||||||
|
</div>
|
||||||
|
<div className="list1">
|
||||||
|
<img src={img3} alt="" className="img" />
|
||||||
|
<div className="info">
|
||||||
|
<div>温度：</div>
|
||||||
|
<div className="temp">28.5°</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="list1">
|
||||||
|
<img src={img4} alt="" className="img" />
|
||||||
|
<div className="info">
|
||||||
|
<div>风速：</div>
|
||||||
|
<div className="temp">8级</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="info">
|
||||||
|
秦皇岛市气象台发布大风橙色预警[工级/严重]
|
||||||
|
</div>
|
||||||
|
<div className="table">
|
||||||
|
<div className="head" style={{ backgroundImage: `url(${img5})` }}>
|
||||||
|
<div>公司名称</div>
|
||||||
|
<div>处置状态</div>
|
||||||
|
<div>预防措施</div>
|
||||||
|
</div>
|
||||||
|
<div className="scroll">
|
||||||
|
<SeamlessScroll list={block1List} step={0.5}>
|
||||||
|
{block1List.map((item, index) => (
|
||||||
|
<div className="table-container" style={{ backgroundImage: `url(${img6})` }} key={index}>
|
||||||
|
<div className="table-item">{item.companyName}</div>
|
||||||
|
<div className={`table-item ${item.status === 0 ? "fc1" : ""} ${item.status === 1 ? "fc2" : ""} ${item.status === 2 ? "fc3" : ""} `}>
|
||||||
|
{item.status === 0 ? "未处置" : item.status === 1 ? "已处置" : "处置中"}
|
||||||
|
</div>
|
||||||
|
<div className="table-item">{item.preventiveMeasures}</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</SeamlessScroll>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="block2">
|
||||||
|
<Title title="重大危险源运行情况" />
|
||||||
|
<div className="main">
|
||||||
|
<div className="warning">
|
||||||
|
<img src={img7} alt="" />
|
||||||
|
北区二号罐液位过低
|
||||||
|
</div>
|
||||||
|
<div className="main_item">
|
||||||
|
<div className="list" style={{ backgroundImage: `url(${img8})`, height: 91 }}>
|
||||||
|
<div className="title">二级重大危险源（1个）</div>
|
||||||
|
<div className="main_con">
|
||||||
|
<div className="item">储罐数：3</div>
|
||||||
|
<div className="item ">再用数：3</div>
|
||||||
|
<div className="item ">
|
||||||
|
停用数：
|
||||||
|
<span className="fcr">2</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="list" style={{ backgroundImage: `url(${img8})`, height: 91 }}>
|
||||||
|
<div className="title">三级重大危险源（2个）</div>
|
||||||
|
<div className="main_con">
|
||||||
|
<div className="item">储罐数：10</div>
|
||||||
|
<div className="item ">再用数：10</div>
|
||||||
|
<div className="item ">
|
||||||
|
停用数：
|
||||||
|
<span className="fcr">0</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="main_item">
|
||||||
|
<div className="list" style={{ backgroundImage: `url(${img9})`, height: 117 }}>
|
||||||
|
<div className="item_list">
|
||||||
|
<div className="info">东罐区二号罐</div>
|
||||||
|
<div className="state">正常</div>
|
||||||
|
</div>
|
||||||
|
<div className="item_list">
|
||||||
|
<div className="info">东罐区二号罐</div>
|
||||||
|
<div className="state fcr">液位低</div>
|
||||||
|
</div>
|
||||||
|
<div className="item_list">
|
||||||
|
<div className="info">东罐区二号罐</div>
|
||||||
|
<div className="state">正常</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="list" style={{ backgroundImage: `url(${img9})`, height: 117 }}>
|
||||||
|
<div className="title fcb">报警处置情况</div>
|
||||||
|
<div className="main_con1">
|
||||||
|
<div className="item">温度待处置数/报警个数：0/0 </div>
|
||||||
|
<div className="item ">压力待处置数/报警个数：0/0</div>
|
||||||
|
<div className="item ">液位待处置数/报警个数：1/1</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="block3">
|
||||||
|
<Title title="领域整改情况统计" />
|
||||||
|
<div className="main">
|
||||||
|
<div ref={main1Ref} style={{ width: "100%", height: "180px" }} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="block4">
|
||||||
|
<Title title="当前各公司作业中情况" />
|
||||||
|
<div className="main">
|
||||||
|
<div className="table">
|
||||||
|
<div className="head" style={{ backgroundImage: `url(${img5})` }}>
|
||||||
|
<div>公司名称</div>
|
||||||
|
<div>发现隐患数</div>
|
||||||
|
<div>整改隐患数</div>
|
||||||
|
<div>待整改</div>
|
||||||
|
<div>待验收</div>
|
||||||
|
</div>
|
||||||
|
<div className="scroll">
|
||||||
|
<SeamlessScroll list={block4List} step={0.5}>
|
||||||
|
{block4List.map((item, index) => (
|
||||||
|
<div className="table-container" style={{ backgroundImage: `url(${img6})` }} key={index}>
|
||||||
|
<div className="table-item">{item.companyName}</div>
|
||||||
|
<div className="table-item">{item.foundHazards}</div>
|
||||||
|
<div className="table-item">{item.resolvedHazards}</div>
|
||||||
|
<div className="table-item">{item.pendingResolution}</div>
|
||||||
|
<div className="table-item">{item.pendingAcceptance}</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</SeamlessScroll>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default LeftScreen;
|
||||||
|
|
@ -0,0 +1,244 @@
|
||||||
|
.index_info_container {
|
||||||
|
.left-container {
|
||||||
|
width: 360px;
|
||||||
|
position: absolute;
|
||||||
|
left: 20px;
|
||||||
|
top: 60px;
|
||||||
|
max-height: calc(100vh - 75px);
|
||||||
|
|
||||||
|
.block1 {
|
||||||
|
background: rgba(0, 41, 82, 0.68);
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid rgba(44, 105, 172, 0.6);
|
||||||
|
|
||||||
|
.main {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 10px;
|
||||||
|
|
||||||
|
.list1 {
|
||||||
|
display: flex;
|
||||||
|
color: #ffffff;
|
||||||
|
align-items: center;
|
||||||
|
width: 33%;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.img1 {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img {
|
||||||
|
width: 42px;
|
||||||
|
height: 42px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.temp {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #00e7ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
color: #fe9e00;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table {
|
||||||
|
margin-top: 10px;
|
||||||
|
|
||||||
|
.head {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr 2fr;
|
||||||
|
color: #ffffff;
|
||||||
|
padding: 5px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll {
|
||||||
|
height: 100px;
|
||||||
|
overflow-y: hidden;
|
||||||
|
|
||||||
|
.table-container {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr 2fr;
|
||||||
|
color: #ffffff;
|
||||||
|
padding: 5px;
|
||||||
|
font-size: 12px;
|
||||||
|
margin: 5px auto;
|
||||||
|
|
||||||
|
.fc1 {
|
||||||
|
color: #0c90ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc2 {
|
||||||
|
color: #62b13f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc3 {
|
||||||
|
color: #ffa105;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.block2 {
|
||||||
|
margin-top: 10px;
|
||||||
|
background: rgba(0, 41, 82, 0.68);
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid rgba(44, 105, 172, 0.6);
|
||||||
|
|
||||||
|
.main {
|
||||||
|
.warning {
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 1px;
|
||||||
|
border-color: rgb(255, 0, 0, 0.5);
|
||||||
|
border-radius: 2px;
|
||||||
|
background-color: rgba(16, 36, 93, 0.659);
|
||||||
|
color: #ffffff;
|
||||||
|
padding: 5px;
|
||||||
|
vertical-align: middle;
|
||||||
|
font-weight: bold;
|
||||||
|
margin: 10px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt10 {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main_item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.list {
|
||||||
|
width: 48%;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
padding: 5px;
|
||||||
|
color: #ffffff;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main_con {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
|
||||||
|
.item {
|
||||||
|
width: 50%;
|
||||||
|
margin: 2px 0;
|
||||||
|
font-size: 12px;
|
||||||
|
|
||||||
|
.fcr {
|
||||||
|
color: #f90102;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.fcb {
|
||||||
|
color: #00aeff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main_con1 {
|
||||||
|
.item {
|
||||||
|
margin: 2px 0;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 22px;
|
||||||
|
|
||||||
|
.fcr {
|
||||||
|
color: #f90102;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.item_list {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
border-bottom: 1px solid #163682;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 30px;
|
||||||
|
|
||||||
|
.info {
|
||||||
|
width: 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.state {
|
||||||
|
width: 40%;
|
||||||
|
text-align: right;
|
||||||
|
color: #7ccf41;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fcr {
|
||||||
|
color: #f90102;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.block3 {
|
||||||
|
margin-top: 20px;
|
||||||
|
background: rgba(0, 41, 82, 0.68);
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid rgba(44, 105, 172, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.block4 {
|
||||||
|
margin-top: 20px;
|
||||||
|
background: rgba(0, 41, 82, 0.68);
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid rgba(44, 105, 172, 0.6);
|
||||||
|
|
||||||
|
.main {
|
||||||
|
.table {
|
||||||
|
margin-top: 10px;
|
||||||
|
|
||||||
|
.head {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
||||||
|
color: #ffffff;
|
||||||
|
padding: 5px;
|
||||||
|
font-size: 12px;
|
||||||
|
background: rgba(39, 101, 175, 0.5);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll {
|
||||||
|
height: 100px;
|
||||||
|
overflow-y: hidden;
|
||||||
|
|
||||||
|
.table-container {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
||||||
|
color: #ffffff;
|
||||||
|
padding: 5px;
|
||||||
|
font-size: 12px;
|
||||||
|
margin: 5px auto;
|
||||||
|
background: rgba(17, 51, 122, 0.5);
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.fc1 {
|
||||||
|
color: #0c90ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc2 {
|
||||||
|
color: #62b13f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc3 {
|
||||||
|
color: #ffa105;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,182 @@
|
||||||
|
import { useState } from "react";
|
||||||
|
import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
|
||||||
|
import img8 from "~/assets/images/public/bigScreen/bg11.png";
|
||||||
|
import img9 from "~/assets/images/public/bigScreen/bg12.png";
|
||||||
|
import img2 from "~/assets/images/public/bigScreen/ico6.png";
|
||||||
|
import img3 from "~/assets/images/public/bigScreen/ico7.png";
|
||||||
|
import img4 from "~/assets/images/public/bigScreen/ico8.png";
|
||||||
|
import img7 from "~/assets/images/public/bigScreen/ico9.png";
|
||||||
|
import img5 from "~/assets/images/public/bigScreen/tablebg1.png";
|
||||||
|
import img6 from "~/assets/images/public/bigScreen/tablebg2.png";
|
||||||
|
import Title from "~/pages/Container/Map/components/Content/IndexInfo/Title";
|
||||||
|
import "./index.less";
|
||||||
|
|
||||||
|
function RightScreen() {
|
||||||
|
const [block1List, setBlock1List] = useState([
|
||||||
|
{ id: 1, companyName: "方宇物业", pendingApprovalProjects: 2, pendingTrainingSubmissions: 3, pendingTrainees: 4 },
|
||||||
|
{ id: 2, companyName: "华泰建设工程", pendingApprovalProjects: 5, pendingTrainingSubmissions: 8, pendingTrainees: 12 },
|
||||||
|
{ id: 3, companyName: "宏达设备维护", pendingApprovalProjects: 3, pendingTrainingSubmissions: 6, pendingTrainees: 9 },
|
||||||
|
{ id: 4, companyName: "金鼎安全服务", pendingApprovalProjects: 7, pendingTrainingSubmissions: 10, pendingTrainees: 15 },
|
||||||
|
{ id: 5, companyName: "瑞丰技术服务", pendingApprovalProjects: 4, pendingTrainingSubmissions: 5, pendingTrainees: 7 },
|
||||||
|
{ id: 6, companyName: "恒通物流运输", pendingApprovalProjects: 6, pendingTrainingSubmissions: 9, pendingTrainees: 11 },
|
||||||
|
{ id: 7, companyName: "天成环保科技", pendingApprovalProjects: 8, pendingTrainingSubmissions: 12, pendingTrainees: 18 },
|
||||||
|
{ id: 8, companyName: "绿源消防设施", pendingApprovalProjects: 2, pendingTrainingSubmissions: 4, pendingTrainees: 6 },
|
||||||
|
{ id: 9, companyName: "安泰检测评估", pendingApprovalProjects: 5, pendingTrainingSubmissions: 7, pendingTrainees: 10 },
|
||||||
|
{ id: 10, companyName: "创新信息技术", pendingApprovalProjects: 3, pendingTrainingSubmissions: 5, pendingTrainees: 8 },
|
||||||
|
]);
|
||||||
|
const [block4List, setBlock4List] = useState([
|
||||||
|
{ id: 1, companyName: "新益公司", detectionSystem: "火灾检测系统", alarmReason: "燃气泄露", dispositionStatus: "未处置" },
|
||||||
|
{ id: 2, companyName: "华泰化工", detectionSystem: "温度监控系统", alarmReason: "超温报警", dispositionStatus: "已处置" },
|
||||||
|
{ id: 3, companyName: "宏达制造", detectionSystem: "压力检测系统", alarmReason: "压力异常", dispositionStatus: "处置中" },
|
||||||
|
{ id: 4, companyName: "金鼎能源", detectionSystem: "气体检测系统", alarmReason: "有毒气体超标", dispositionStatus: "未处置" },
|
||||||
|
{ id: 5, companyName: "瑞丰新材料", detectionSystem: "液位监控系统", alarmReason: "液位过高", dispositionStatus: "已处置" },
|
||||||
|
{ id: 6, companyName: "恒通物流", detectionSystem: "烟雾探测系统", alarmReason: "烟雾浓度超标", dispositionStatus: "处置中" },
|
||||||
|
{ id: 7, companyName: "天成建筑", detectionSystem: "振动监测系统", alarmReason: "设备振动异常", dispositionStatus: "未处置" },
|
||||||
|
{ id: 8, companyName: "绿源环保", detectionSystem: "水质检测系统", alarmReason: "PH值异常", dispositionStatus: "已处置" },
|
||||||
|
{ id: 9, companyName: "安泰消防", detectionSystem: "火警联动系统", alarmReason: "火焰探测报警", dispositionStatus: "处置中" },
|
||||||
|
{ id: 10, companyName: "创新科技", detectionSystem: "电气监控系统", alarmReason: "电流过载", dispositionStatus: "未处置" },
|
||||||
|
]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="right-container">
|
||||||
|
<div className="block1">
|
||||||
|
<Title title="相关方申请审批管理" />
|
||||||
|
<div className="main">
|
||||||
|
<div className="table">
|
||||||
|
<div className="head" style={{ backgroundImage: `url(${img5})` }}>
|
||||||
|
<div>单位名称</div>
|
||||||
|
<div>待审批项目数</div>
|
||||||
|
<div>待提交培训人员数</div>
|
||||||
|
<div>待培训人数</div>
|
||||||
|
</div>
|
||||||
|
<div className="scroll">
|
||||||
|
<SeamlessScroll list={block1List} step={0.5}>
|
||||||
|
{block1List.map((item, index) => (
|
||||||
|
<div className="table-container" style={{ backgroundImage: `url(${img6})` }} key={index}>
|
||||||
|
<div className="table-item">{item.companyName}</div>
|
||||||
|
<div className="table-item">{item.pendingApprovalProjects}</div>
|
||||||
|
<div className="table-item">{item.pendingTrainingSubmissions}</div>
|
||||||
|
<div className="table-item">{item.pendingTrainees}</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</SeamlessScroll>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="block2">
|
||||||
|
<Title title="当前重点作业统计" />
|
||||||
|
<div className="main">
|
||||||
|
<div className="item">
|
||||||
|
<div className="img">
|
||||||
|
<img src={img2} alt="" />
|
||||||
|
</div>
|
||||||
|
<div className="info">
|
||||||
|
<div className="title">三人以上作业</div>
|
||||||
|
<div>
|
||||||
|
<p> 当前作业数：13</p>
|
||||||
|
<p>申请数：14</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="item">
|
||||||
|
<div className="img">
|
||||||
|
<img src={img3} alt="" />
|
||||||
|
</div>
|
||||||
|
<div className="info">
|
||||||
|
<div className="title">危险作业</div>
|
||||||
|
<div>
|
||||||
|
<p> 当前作业数：13</p>
|
||||||
|
<p>申请数：14</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="item">
|
||||||
|
<div className="img">
|
||||||
|
<img src={img4} alt="" />
|
||||||
|
</div>
|
||||||
|
<div className="info">
|
||||||
|
<div className="title">夜间作业</div>
|
||||||
|
<div>
|
||||||
|
<p> 当前作业数：13</p>
|
||||||
|
<p>申请数：14</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="item">
|
||||||
|
<div className="img">
|
||||||
|
<img src={img7} alt="" />
|
||||||
|
</div>
|
||||||
|
<div className="info">
|
||||||
|
<div className="title">四新作业</div>
|
||||||
|
<div>
|
||||||
|
<p> 当前作业数：13</p>
|
||||||
|
<p>申请数：14</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="block3">
|
||||||
|
<Title title="当前口门、封闭区情况" />
|
||||||
|
<div className="main">
|
||||||
|
<div className="item" style={{ backgroundImage: `url(${img9})` }}>
|
||||||
|
<div className="title">一级口门进出统计</div>
|
||||||
|
<div className="num">
|
||||||
|
<div>人数：2100</div>
|
||||||
|
<div>车数：1125</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="item" style={{ backgroundImage: `url(${img9})` }}>
|
||||||
|
<div className="title">进入申请待审批</div>
|
||||||
|
<div className="num">
|
||||||
|
<div>人数：2100</div>
|
||||||
|
<div>车数：1125</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="item" style={{ backgroundImage: `url(${img8})` }}>
|
||||||
|
<div className="title">封闭区域人员情况</div>
|
||||||
|
<div className="num">
|
||||||
|
<div>人数：2100</div>
|
||||||
|
<div>车数：1125</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="item" style={{ backgroundImage: `url(${img8})` }}>
|
||||||
|
<div className="title">封闭区域作业情况</div>
|
||||||
|
<div className="num">
|
||||||
|
<div>人数：2100</div>
|
||||||
|
<div>车数：1125</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="block4">
|
||||||
|
<Title title="物联网设备报警情况" />
|
||||||
|
<div className="main">
|
||||||
|
<div className="table">
|
||||||
|
<div className="head" style={{ backgroundImage: `url(${img5})` }}>
|
||||||
|
<div>公司名称</div>
|
||||||
|
<div>检测系统</div>
|
||||||
|
<div>报警原因</div>
|
||||||
|
<div>处置状态</div>
|
||||||
|
</div>
|
||||||
|
<div className="scroll">
|
||||||
|
<SeamlessScroll list={block4List} step={0.5}>
|
||||||
|
{block4List.map((item, index) => (
|
||||||
|
<div className="table-container" style={{ backgroundImage: `url(${img6})` }} key={index}>
|
||||||
|
<div className="table-item">{item.companyName}</div>
|
||||||
|
<div className="table-item">{item.detectionSystem}</div>
|
||||||
|
<div className="table-item">{item.alarmReason}</div>
|
||||||
|
<div className="table-item">{item.dispositionStatus}</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</SeamlessScroll>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default RightScreen;
|
||||||
|
|
@ -0,0 +1,181 @@
|
||||||
|
.index_info_container {
|
||||||
|
.right-container {
|
||||||
|
width: 360px;
|
||||||
|
position: absolute;
|
||||||
|
right: 20px;
|
||||||
|
top: 60px;
|
||||||
|
max-height: calc(100vh - 75px);
|
||||||
|
|
||||||
|
.block1 {
|
||||||
|
background: rgba(0, 41, 82, 0.68);
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid rgba(44, 105, 172, 0.6);
|
||||||
|
|
||||||
|
.main {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.table {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 10px;
|
||||||
|
|
||||||
|
.head {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr 1.5fr 1fr;
|
||||||
|
color: #ffffff;
|
||||||
|
padding: 5px;
|
||||||
|
font-size: 12px;
|
||||||
|
background: rgba(39, 101, 175, 0.5);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll {
|
||||||
|
height: 180px;
|
||||||
|
overflow-y: hidden;
|
||||||
|
|
||||||
|
.table-container {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr 1.5fr 1fr;
|
||||||
|
color: #ffffff;
|
||||||
|
padding: 5px;
|
||||||
|
font-size: 12px;
|
||||||
|
margin: 5px auto;
|
||||||
|
background: rgba(17, 51, 122, 0.5);
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.fc1 {
|
||||||
|
color: #0c90ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc2 {
|
||||||
|
color: #62b13f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc3 {
|
||||||
|
color: #ffa105;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.block2 {
|
||||||
|
margin-top: 10px;
|
||||||
|
background: rgba(0, 41, 82, 0.68);
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid rgba(44, 105, 172, 0.6);
|
||||||
|
|
||||||
|
.main {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
.item {
|
||||||
|
width: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 10px;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
padding-left: 10px;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 12px;
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.block3 {
|
||||||
|
margin-top: 20px;
|
||||||
|
background: rgba(0, 41, 82, 0.68);
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid rgba(44, 105, 172, 0.6);
|
||||||
|
|
||||||
|
.main {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.item {
|
||||||
|
width: 49%;
|
||||||
|
text-align: center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
color: #ffffff;
|
||||||
|
padding: 5px 10px;
|
||||||
|
font-size: 12px;
|
||||||
|
margin-top: 10px;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.num {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.block4 {
|
||||||
|
margin-top: 20px;
|
||||||
|
background: rgba(0, 41, 82, 0.68);
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid rgba(44, 105, 172, 0.6);
|
||||||
|
|
||||||
|
.main {
|
||||||
|
.table {
|
||||||
|
margin-top: 10px;
|
||||||
|
|
||||||
|
.head {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||||
|
color: #ffffff;
|
||||||
|
padding: 5px;
|
||||||
|
font-size: 12px;
|
||||||
|
background: rgba(39, 101, 175, 0.5);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll {
|
||||||
|
height: 300px;
|
||||||
|
overflow-y: hidden;
|
||||||
|
|
||||||
|
.table-container {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||||
|
color: #ffffff;
|
||||||
|
padding: 5px;
|
||||||
|
font-size: 12px;
|
||||||
|
margin: 5px auto;
|
||||||
|
background: rgba(17, 51, 122, 0.5);
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.fc1 {
|
||||||
|
color: #0c90ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc2 {
|
||||||
|
color: #62b13f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc3 {
|
||||||
|
color: #ffa105;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,96 @@
|
||||||
|
.index_info_container {
|
||||||
|
.search_container {
|
||||||
|
width: 214px;
|
||||||
|
min-height: 200px;
|
||||||
|
position: absolute;
|
||||||
|
top: 100px;
|
||||||
|
left: 400px;
|
||||||
|
background: rgba(0, 41, 82, 0.68);
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid rgba(44, 105, 172, 0.6);
|
||||||
|
|
||||||
|
.top {
|
||||||
|
width: 214px;
|
||||||
|
height: 37px;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
display: flex;
|
||||||
|
padding: 5px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.list {
|
||||||
|
color: #ffffff;
|
||||||
|
padding: 2px 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-radius: 2px;
|
||||||
|
background-color: rgba(36, 115, 239, 0.549);
|
||||||
|
box-shadow: 0 1px 1px 0 rgba(2, 32, 95, 0.4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
border-radius: 2px;
|
||||||
|
background-color: rgba(36, 115, 239, 0.549);
|
||||||
|
box-shadow: 0 1px 1px 0 rgba(2, 32, 95, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.close {
|
||||||
|
position: absolute;
|
||||||
|
top: 5px;
|
||||||
|
right: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.search_con {
|
||||||
|
background: rgba(5, 40, 106, 0.68);
|
||||||
|
height: 30px;
|
||||||
|
border: 1px solid rgba(23, 86, 168, 0.68);
|
||||||
|
margin: 5px;
|
||||||
|
border-radius: 4px;
|
||||||
|
color: #4371af;
|
||||||
|
line-height: 30px;
|
||||||
|
padding-left: 5px;
|
||||||
|
font-size: 12px;
|
||||||
|
|
||||||
|
.input {
|
||||||
|
border: none;
|
||||||
|
background: none;
|
||||||
|
width: 100%;
|
||||||
|
height: 30px;
|
||||||
|
outline: none;
|
||||||
|
color: #ffffff;
|
||||||
|
|
||||||
|
&::-webkit-input-placeholder {
|
||||||
|
color: #4371af;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.con {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.item {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #ffffff;
|
||||||
|
padding: 5px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-bottom: 1px dashed #205376;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
border-radius: 4px;
|
||||||
|
background-color: rgba(36, 115, 239, 0.2);
|
||||||
|
padding: 2px 5px;
|
||||||
|
border: 1px solid rgba(42, 86, 158, 0.58);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
import img1 from "~/assets/images/public/bigScreen/smalltitle.png";
|
||||||
|
import "./index.less";
|
||||||
|
|
||||||
|
function Title(props) {
|
||||||
|
return (
|
||||||
|
<div className="index_info_container_title" style={{ backgroundImage: `url(${img1})` }}>
|
||||||
|
{props.title}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Title;
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
.index_info_container {
|
||||||
|
&_title {
|
||||||
|
color: #ffffff;
|
||||||
|
font-weight: bold;
|
||||||
|
padding-left: 30px;
|
||||||
|
width: 100%;
|
||||||
|
height: 30px;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,69 +1,16 @@
|
||||||
import { useState } from "react";
|
import Bottom from "./Bottom";
|
||||||
import CountUp from "react-countup";
|
import LeftPanel from "./LeftPanel";
|
||||||
import icon1 from "~/assets/images/map_bi/content/icon1.png";
|
import RightPanel from "./RightPanel";
|
||||||
import icon2 from "~/assets/images/map_bi/content/icon2.png";
|
import Search from "./Search";
|
||||||
import icon3 from "~/assets/images/map_bi/content/icon3.png";
|
|
||||||
import icon4 from "~/assets/images/map_bi/content/icon4.png";
|
|
||||||
import icon5 from "~/assets/images/map_bi/content/icon5.png";
|
|
||||||
import icon6 from "~/assets/images/map_bi/content/icon6.png";
|
|
||||||
import img1 from "~/assets/images/map_bi/content/img1.png";
|
|
||||||
import img2 from "~/assets/images/map_bi/content/img2.png";
|
|
||||||
import Title from "~/pages/Container/Map/components/Content/port/Title";
|
|
||||||
import "./index.less";
|
import "./index.less";
|
||||||
|
|
||||||
function IndexInfo() {
|
function IndexInfo() {
|
||||||
const [block1OptionsList] = useState([
|
|
||||||
{ img: icon1, label: "股份公司部门数量", value: 0 },
|
|
||||||
{ img: icon2, label: "分子公司数", value: 0 },
|
|
||||||
{ img: icon3, label: "相关方单位数", value: 0 },
|
|
||||||
]);
|
|
||||||
|
|
||||||
const [block2OptionsList] = useState([
|
|
||||||
{ img: icon4, title: "监管端人员数", value: 0 },
|
|
||||||
{ img: icon5, title: "分子公司人数", value: 0 },
|
|
||||||
{ img: icon6, title: "相关方人员数", value: 0 },
|
|
||||||
]);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="index_info_container">
|
<div className="index_info_container">
|
||||||
<div className="block1">
|
<LeftPanel />
|
||||||
<Title title="企业统计" />
|
<RightPanel />
|
||||||
<div className="options">
|
<Bottom />
|
||||||
{block1OptionsList.map((item, index) => (
|
<Search />
|
||||||
<div key={index} className="option">
|
|
||||||
<img src={item.img} className="img_top" alt="" />
|
|
||||||
<img
|
|
||||||
className="img_bottom"
|
|
||||||
src={img1}
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
<div className="label">{item.label}</div>
|
|
||||||
<div className="value">
|
|
||||||
<CountUp end={+item.value} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="block2">
|
|
||||||
<Title title="客户数据" />
|
|
||||||
<div className="options">
|
|
||||||
{block2OptionsList.map((item, index) => (
|
|
||||||
<div key={index} className="option">
|
|
||||||
<div className="img" style={{ backgroundImage: `url(${img2})` }}>
|
|
||||||
<img src={item.img} alt="" />
|
|
||||||
</div>
|
|
||||||
<div className="info">
|
|
||||||
<div className="label">{item.title}</div>
|
|
||||||
<div className="value">
|
|
||||||
<CountUp end={+item.value} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,146 +1,3 @@
|
||||||
.index_info_container {
|
.index_info_container {
|
||||||
.block1 {
|
|
||||||
background-image: linear-gradient(to bottom,
|
|
||||||
rgba(0, 0, 0, 0),
|
|
||||||
rgba(0, 0, 0, 0.8));
|
|
||||||
|
|
||||||
.options {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 10px;
|
|
||||||
border: 1px solid;
|
|
||||||
border-image: linear-gradient(to bottom,
|
|
||||||
rgba(58, 122, 149, 0),
|
|
||||||
rgba(58, 122, 149, 1)) 1;
|
|
||||||
border-top: none;
|
|
||||||
|
|
||||||
.option {
|
|
||||||
flex-basis: 33.33%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.img_top {
|
|
||||||
position: absolute;
|
|
||||||
width: 70px;
|
|
||||||
height: 70px;
|
|
||||||
animation: indexInfoContainerSlideY 2s infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.img_bottom {
|
|
||||||
position: absolute;
|
|
||||||
width: 75px;
|
|
||||||
height: 75px;
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label {
|
|
||||||
margin-top: 75px;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 14px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.value {
|
|
||||||
background-image: linear-gradient(to bottom, #5bb4f7, #ffffff);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
font-weight: bold;
|
|
||||||
margin-top: 10px;
|
|
||||||
font-family: "PingFang SC", "Helvetica Neue", "Hiragino Sans GB",
|
|
||||||
"Segoe UI", "Microsoft YaHei", "微软雅黑", sans-serif;
|
|
||||||
font-size: 26px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.block2 {
|
|
||||||
background-image: linear-gradient(to bottom,
|
|
||||||
rgba(0, 0, 0, 0),
|
|
||||||
rgba(0, 0, 0, 0.8));
|
|
||||||
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;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
.option {
|
|
||||||
display: flex;
|
|
||||||
width: 50%;
|
|
||||||
align-items: center;
|
|
||||||
margin-top: 10px;
|
|
||||||
|
|
||||||
&:nth-child(-n + 2) {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.img {
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
text-align: center;
|
|
||||||
margin-left: 20px;
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
animation: indexInfoContainerScale 2s infinite;
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.info {
|
|
||||||
color: #ffffff;
|
|
||||||
margin-left: 10px;
|
|
||||||
|
|
||||||
.label {
|
|
||||||
height: 25px;
|
|
||||||
line-height: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.value {
|
|
||||||
background: linear-gradient(to top, #48bbf0, #ffffff);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
font-weight: bold;
|
|
||||||
font-family: "PingFang SC", "Helvetica Neue", "Hiragino Sans GB",
|
|
||||||
"Segoe UI", "Microsoft YaHei", "微软雅黑", sans-serif;
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes indexInfoContainerSlideY {
|
|
||||||
0% {
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
transform: translateY(-5px);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes indexInfoContainerScale {
|
|
||||||
0% {
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
transform: scale(0.8);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -115,13 +115,13 @@ function Content() {
|
||||||
const renderContent = () => {
|
const renderContent = () => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
{!leftDisplayedContent.currentPort && (<IndexInfo />)}
|
||||||
{isLeftVisible && (
|
{isLeftVisible && (
|
||||||
<motion.div
|
<motion.div
|
||||||
animate={leftControls}
|
animate={leftControls}
|
||||||
className={`map_content_container__content ${(!leftDisplayedContent.currentPort || (leftDisplayedContent.currentPort === "00003" && !leftDisplayedContent.currentBranchOffice)) ? "port" : "branch_office"}`}
|
className={`map_content_container__content ${(!leftDisplayedContent.currentPort || (leftDisplayedContent.currentPort === "00003" && !leftDisplayedContent.currentBranchOffice)) ? "port" : "branch_office"}`}
|
||||||
style={{ left: 35 }}
|
style={{ left: 35 }}
|
||||||
>
|
>
|
||||||
{!leftDisplayedContent.currentPort && <IndexInfo />}
|
|
||||||
{(leftDisplayedContent.currentPort === "00003" && !leftDisplayedContent.currentBranchOffice) && renderPortContent()}
|
{(leftDisplayedContent.currentPort === "00003" && !leftDisplayedContent.currentBranchOffice) && renderPortContent()}
|
||||||
{leftDisplayedContent.currentBranchOffice && renderBranchOfficeContentLeft()}
|
{leftDisplayedContent.currentBranchOffice && renderBranchOfficeContentLeft()}
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
|
||||||
|
|
@ -29,7 +29,7 @@ function RightUtils(props) {
|
||||||
displayedMode: rightUtilsDisplayedMode,
|
displayedMode: rightUtilsDisplayedMode,
|
||||||
isVisible: rightUtilsIsVisible,
|
isVisible: rightUtilsIsVisible,
|
||||||
} = useRightUtilsAnimation(
|
} = useRightUtilsAnimation(
|
||||||
!currentBranchOffice,
|
currentPort && !currentBranchOffice,
|
||||||
currentBranchOffice && bottomUtilsCurrentIndex !== -1,
|
currentBranchOffice && bottomUtilsCurrentIndex !== -1,
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue