地图首页接口对接
parent
565670d59a
commit
9310c86fd0
|
|
@ -9,15 +9,13 @@ module.exports = {
|
||||||
// 应用后端分支名称,部署上线需要
|
// 应用后端分支名称,部署上线需要
|
||||||
javaGitBranch: "<branch-name>",
|
javaGitBranch: "<branch-name>",
|
||||||
// 接口服务地址
|
// 接口服务地址
|
||||||
// API_HOST: "https://gbs-gateway.qhdsafety.com",
|
API_HOST: "https://gbs-gateway.qhdsafety.com",
|
||||||
API_HOST: "http://192.168.20.100:30140",
|
|
||||||
},
|
},
|
||||||
production: {
|
production: {
|
||||||
// 应用后端分支名称,部署上线需要
|
// 应用后端分支名称,部署上线需要
|
||||||
javaGitBranch: "<branch-name>",
|
javaGitBranch: "<branch-name>",
|
||||||
// 接口服务地址
|
// 接口服务地址
|
||||||
// API_HOST: "",
|
API_HOST: "",
|
||||||
API_HOST: "https://gbs-gateway.qhdsafety.com",
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
// 应用唯一标识符
|
// 应用唯一标识符
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,42 @@
|
||||||
import { declareRequest } from '@cqsjjb/jjb-dva-runtime';
|
import { declareRequest } from "@cqsjjb/jjb-dva-runtime";
|
||||||
|
|
||||||
export const getWeather = declareRequest(
|
export const getWeather = declareRequest(
|
||||||
'biLoading',
|
"indexInfoWeatherLoading",
|
||||||
'Get > https://api.map.baidu.com/weather/v1/?district_id=130300&data_type=all&ak=dIqOi34IlTg5FkNck1vqoBpLhPAj36S1',
|
"Get > /bi/weather/info",
|
||||||
|
);
|
||||||
|
export const getEventReportListUnfinished = declareRequest(
|
||||||
|
"indexInfoEmergencyRescueLoading",
|
||||||
|
"Post > @/emergencyRescue/eventReport/listUnfinished",
|
||||||
|
);
|
||||||
|
export const getProjectTaskScoreCount = declareRequest(
|
||||||
|
"indexInfoDomainLoading",
|
||||||
|
"Get > /domain/projectTask/scoreCount",
|
||||||
|
);
|
||||||
|
export const getHiddenStatisticsByCorp = declareRequest(
|
||||||
|
"indexInfoHiddenLoading",
|
||||||
|
"Post > @/hidden/hidden/statisticsByCorp",
|
||||||
|
);
|
||||||
|
export const getXgfStatisticsListCorpStatistics = declareRequest(
|
||||||
|
"indexInfoXgfManagerLoading",
|
||||||
|
"Post > @/xgfManager/xgfStatistics/listCorpStatistics",
|
||||||
|
);
|
||||||
|
export const getAlarmRecordScreenIotDeviceAlarmPage = declareRequest(
|
||||||
|
"indexInfoIotalarmLoading",
|
||||||
|
"Post > @/iotalarm/alarmRecord/screenIotDeviceAlarmPage",
|
||||||
|
);
|
||||||
|
export const getXgfStatisticsListRecordProjectStatistics = declareRequest(
|
||||||
|
"indexInfoXgfManagerProjectLoading",
|
||||||
|
"Get > /xgfManager/xgfStatistics/listRecordProjectStatistics",
|
||||||
|
);
|
||||||
|
export const getFixedCameraVideoList = declareRequest(
|
||||||
|
"indexInfoVideoPatrolLoading",
|
||||||
|
"Post > @/videopatrol/fixedCamera/getVideoList",
|
||||||
|
);
|
||||||
|
export const getFixedCameraPlayUrl = declareRequest(
|
||||||
|
"indexInfoVideoPatrolUrlLoading",
|
||||||
|
"Get > /videopatrol/fixedCamera/getPlayUrl",
|
||||||
|
);
|
||||||
|
export const getEightWorkInfoDangerWorkStatistics = declareRequest(
|
||||||
|
"indexInfoEightWorkLoading",
|
||||||
|
"Post > @/eightwork/eightworkInfo/dangerWorkStatistics",
|
||||||
);
|
);
|
||||||
|
|
@ -199,7 +199,7 @@ export const portUtilsList = [
|
||||||
{
|
{
|
||||||
img: bottomImg6,
|
img: bottomImg6,
|
||||||
checkImg: bottomImg6On,
|
checkImg: bottomImg6On,
|
||||||
label: "危险作业",
|
label: "重点作业",
|
||||||
type: "danger",
|
type: "danger",
|
||||||
list: [
|
list: [
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,48 @@
|
||||||
|
import { Connect } from "@cqsjjb/jjb-dva-runtime";
|
||||||
|
import { message, Spin } from "antd";
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
|
||||||
import AliPlayer from "zy-react-library/components/Video/AliPlayer";
|
import AliPlayer from "zy-react-library/components/Video/AliPlayer";
|
||||||
|
import { randoms } from "zy-react-library/utils";
|
||||||
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 { NS_BI } from "~/enumerate/namespace";
|
||||||
import Title from "~/pages/Container/Map/components/Content/IndexInfo/Title";
|
import Title from "~/pages/Container/Map/components/Content/IndexInfo/Title";
|
||||||
import "./index.less";
|
import "./index.less";
|
||||||
|
|
||||||
function BottomScreen() {
|
function BottomScreen(props) {
|
||||||
|
const [block1List, setBlock1List] = useState([]);
|
||||||
|
const [block2List, setBlock2List] = useState([]);
|
||||||
|
const [active, setActive] = useState("");
|
||||||
|
const [playUrl, setPlayUrl] = useState("");
|
||||||
|
|
||||||
|
const getXgfStatisticsListRecordProjectStatistics = async () => {
|
||||||
|
const { data } = await props["getXgfStatisticsListRecordProjectStatistics"]();
|
||||||
|
setBlock1List(data);
|
||||||
|
};
|
||||||
|
const getFixedCameraPlayUrl = async (indexCode) => {
|
||||||
|
const { data, success } = await props["getFixedCameraPlayUrl"]({ indexCode });
|
||||||
|
if (success) {
|
||||||
|
setPlayUrl(data.url);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const getFixedCameraVideoList = async () => {
|
||||||
|
const { data } = await props["getFixedCameraVideoList"]();
|
||||||
|
setBlock2List(data);
|
||||||
|
if (data.length > 0) {
|
||||||
|
setActive(data[0].corpinfoName);
|
||||||
|
if (data[0].fixedCameraCOList.length > 0) {
|
||||||
|
getFixedCameraPlayUrl(data[0].fixedCameraCOList[Math.floor(randoms(0, data[0].fixedCameraCOList.length - 1))].cameraNumber);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
getXgfStatisticsListRecordProjectStatistics();
|
||||||
|
getFixedCameraVideoList();
|
||||||
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="bottom-container_con">
|
<div className="bottom-container_con">
|
||||||
<div className="top_container">
|
<div className="top_container">
|
||||||
|
|
@ -28,59 +65,66 @@ function BottomScreen() {
|
||||||
<div className="bottom-container">
|
<div className="bottom-container">
|
||||||
<div className="left">
|
<div className="left">
|
||||||
<Title title="相关方单位备案与项目执行统计" />
|
<Title title="相关方单位备案与项目执行统计" />
|
||||||
<div className="main" style={{ backgroundImage: `url(${img2})` }}>
|
<Spin spinning={props.bi.indexInfoXgfManagerProjectLoading}>
|
||||||
<div className="table">
|
<div className="main" style={{ backgroundImage: `url(${img2})` }}>
|
||||||
<div className="head">
|
<div className="table">
|
||||||
<div>备案类型</div>
|
<div className="head">
|
||||||
<div>主管部门</div>
|
<div>备案类型</div>
|
||||||
<div>相关方单位备案情况</div>
|
<div>主管部门</div>
|
||||||
<div>项目执行情况统计</div>
|
<div>相关方单位备案情况</div>
|
||||||
<div>人员培训情况统计</div>
|
<div>项目执行情况统计</div>
|
||||||
</div>
|
<div>人员培训情况统计</div>
|
||||||
<div className="table-container">
|
</div>
|
||||||
<div className="table-item">新益公司</div>
|
<div className="scroll">
|
||||||
<div className="table-item">23/26</div>
|
<SeamlessScroll list={block1List} step={0.5}>
|
||||||
<div className="table-item">23/26</div>
|
{block1List.map((item, index) => (
|
||||||
<div className="table-item">23/26</div>
|
<div className="table-container" key={index}>
|
||||||
<div className="table-item">23/26</div>
|
<div className="table-item">{item.qualificationsTypeName}</div>
|
||||||
</div>
|
<div className="table-item">{item.managerDeptName}</div>
|
||||||
|
<div className="table-item">{`${item.completedRecordCount}/${item.applyRecordCount}`}</div>
|
||||||
<div className="table-container">
|
<div className="table-item">{`${item.executingProjectCount}/${item.projectCount}`}</div>
|
||||||
<div className="table-item">新益公司</div>
|
<div className="table-item">{`${item.trainingPassedCount}/${item.projectUserCount}`}</div>
|
||||||
<div className="table-item">23/26</div>
|
</div>
|
||||||
<div className="table-item">23/26</div>
|
))}
|
||||||
<div className="table-item">23/26</div>
|
</SeamlessScroll>
|
||||||
<div className="table-item">23/26</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div className="table-container">
|
|
||||||
<div className="table-item">新益公司</div>
|
|
||||||
<div className="table-item">23/26</div>
|
|
||||||
<div className="table-item">23/26</div>
|
|
||||||
<div className="table-item">23/26</div>
|
|
||||||
<div className="table-item">23/26</div>
|
|
||||||
</div>
|
|
||||||
<div className="table-container">
|
|
||||||
<div className="table-item">新益公司</div>
|
|
||||||
<div className="table-item">23/26</div>
|
|
||||||
<div className="table-item">23/26</div>
|
|
||||||
<div className="table-item">23/26</div>
|
|
||||||
<div className="table-item">23/26</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Spin>
|
||||||
</div>
|
</div>
|
||||||
<div className="right">
|
<div className="right">
|
||||||
<Title title="视频巡屏" />
|
<Title title="视频巡屏" />
|
||||||
<div className="main">
|
<div className="main">
|
||||||
<div className="menu">
|
<Spin spinning={props.bi.indexInfoVideoPatrolLoading}>
|
||||||
<div className="list active">新益公司</div>
|
<div className="menu">
|
||||||
<div className="list">二公司</div>
|
{
|
||||||
<div className="list">六公司</div>
|
block2List.map((item, index) => (
|
||||||
<div className="list">七公司</div>
|
<div
|
||||||
<div className="list">九公司</div>
|
className={`list ${item.corpinfoName === active ? "active" : ""}`}
|
||||||
</div>
|
key={index}
|
||||||
|
onClick={() => {
|
||||||
|
setActive(item.corpinfoName);
|
||||||
|
if (item.fixedCameraCOList.length > 0) {
|
||||||
|
getFixedCameraPlayUrl(item.fixedCameraCOList[Math.floor(randoms(0, item.fixedCameraCOList.length - 1))].cameraNumber);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
message.warning("暂无视频");
|
||||||
|
setPlayUrl("");
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{item.corpinfoName}
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</Spin>
|
||||||
<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 />
|
<Spin spinning={props.bi.indexInfoVideoPatrolLoading || props.bi.indexInfoVideoPatrolUrlLoading}>
|
||||||
|
{
|
||||||
|
playUrl ? <AliPlayer source={playUrl} height="100%" isLive /> : <div className="no-video">暂无视频</div>
|
||||||
|
}
|
||||||
|
</Spin>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -89,4 +133,4 @@ function BottomScreen() {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default BottomScreen;
|
export default Connect([NS_BI], true)(BottomScreen);
|
||||||
|
|
|
||||||
|
|
@ -73,6 +73,11 @@
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.scroll{
|
||||||
|
height: 140px;
|
||||||
|
overflow-y: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
.table-container {
|
.table-container {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
||||||
|
|
@ -81,18 +86,6 @@
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
.fc1 {
|
|
||||||
color: #0c90ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fc2 {
|
|
||||||
color: #62b13f;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fc3 {
|
|
||||||
color: #ffa105;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: rgba(14, 197, 208, 0.1);
|
background-color: rgba(14, 197, 208, 0.1);
|
||||||
box-shadow: 0 0 1px #00e7ff;
|
box-shadow: 0 0 1px #00e7ff;
|
||||||
|
|
@ -124,6 +117,7 @@
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 30px;
|
line-height: 30px;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
|
overflow-y: auto;
|
||||||
|
|
||||||
.list {
|
.list {
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
|
|
@ -151,6 +145,12 @@
|
||||||
flex: 1;
|
flex: 1;
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
|
|
||||||
|
.no-video{
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 160px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,9 +3,9 @@ import * as echarts from "echarts";
|
||||||
export const initEcharts1 = (main1Ref, chartInstance, data) => {
|
export const initEcharts1 = (main1Ref, chartInstance, data) => {
|
||||||
chartInstance.current = echarts.init(main1Ref.current);
|
chartInstance.current = echarts.init(main1Ref.current);
|
||||||
|
|
||||||
const companyNames = data.map(item => item.name);
|
const domainTypeName = data.map(item => item.domainTypeName);
|
||||||
const hazardCounts = data.map(item => item.hazardCount);
|
const scoredCount = data.map(item => item.scoredCount);
|
||||||
const unrectifiedCounts = data.map(item => item.unrectifiedCount);
|
const noScoreCount = data.map(item => item.noScoreCount);
|
||||||
|
|
||||||
const option = {
|
const option = {
|
||||||
tooltip: {
|
tooltip: {
|
||||||
|
|
@ -16,7 +16,7 @@ export const initEcharts1 = (main1Ref, chartInstance, data) => {
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
left: "10%",
|
left: "10%",
|
||||||
top: "28%",
|
top: "20%",
|
||||||
right: "10%",
|
right: "10%",
|
||||||
bottom: "25%",
|
bottom: "25%",
|
||||||
},
|
},
|
||||||
|
|
@ -30,6 +30,15 @@ export const initEcharts1 = (main1Ref, chartInstance, data) => {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
dataZoom: [
|
dataZoom: [
|
||||||
|
{
|
||||||
|
type: "inside",
|
||||||
|
xAxisIndex: 0,
|
||||||
|
start: 0,
|
||||||
|
end: 50,
|
||||||
|
zoomOnMouseWheel: "shift",
|
||||||
|
moveOnMouseWheel: true,
|
||||||
|
moveOnMouseMove: true,
|
||||||
|
},
|
||||||
{
|
{
|
||||||
type: "slider",
|
type: "slider",
|
||||||
height: 6,
|
height: 6,
|
||||||
|
|
@ -47,7 +56,7 @@ export const initEcharts1 = (main1Ref, chartInstance, data) => {
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
xAxis: {
|
xAxis: {
|
||||||
data: companyNames,
|
data: domainTypeName,
|
||||||
axisLine: {
|
axisLine: {
|
||||||
show: false,
|
show: false,
|
||||||
},
|
},
|
||||||
|
|
@ -60,7 +69,6 @@ export const initEcharts1 = (main1Ref, chartInstance, data) => {
|
||||||
color: "#FFFFFF",
|
color: "#FFFFFF",
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
margin: 12,
|
margin: 12,
|
||||||
interval: 0,
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
yAxis: [
|
yAxis: [
|
||||||
|
|
@ -73,8 +81,8 @@ export const initEcharts1 = (main1Ref, chartInstance, data) => {
|
||||||
splitLine: {
|
splitLine: {
|
||||||
show: true,
|
show: true,
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: "#000000",
|
color: "#fff",
|
||||||
type: "solid",
|
type: "dashed",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
axisTick: {
|
axisTick: {
|
||||||
|
|
@ -97,9 +105,9 @@ export const initEcharts1 = (main1Ref, chartInstance, data) => {
|
||||||
barWidth: 10,
|
barWidth: 10,
|
||||||
yAxisIndex: 0,
|
yAxisIndex: 0,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: "#C5993B",
|
color: "#53ed06",
|
||||||
},
|
},
|
||||||
data: hazardCounts,
|
data: scoredCount,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "未评分",
|
name: "未评分",
|
||||||
|
|
@ -109,7 +117,7 @@ export const initEcharts1 = (main1Ref, chartInstance, data) => {
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: "#FF0606",
|
color: "#FF0606",
|
||||||
},
|
},
|
||||||
data: unrectifiedCounts,
|
data: noScoreCount,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,6 @@
|
||||||
|
import { Connect } from "@cqsjjb/jjb-dva-runtime";
|
||||||
import { useMount } from "ahooks";
|
import { useMount } from "ahooks";
|
||||||
|
import { Spin } from "antd";
|
||||||
import { useEffect, useRef, useState } from "react";
|
import { useEffect, useRef, useState } from "react";
|
||||||
import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
|
import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
|
||||||
import img9 from "~/assets/images/public/bigScreen/bg9.png";
|
import img9 from "~/assets/images/public/bigScreen/bg9.png";
|
||||||
|
|
@ -9,67 +11,52 @@ import img5 from "~/assets/images/public/bigScreen/tablebg1.png";
|
||||||
import img6 from "~/assets/images/public/bigScreen/tablebg2.png";
|
import img6 from "~/assets/images/public/bigScreen/tablebg2.png";
|
||||||
import img3 from "~/assets/images/public/bigScreen/w_ico1.png";
|
import img3 from "~/assets/images/public/bigScreen/w_ico1.png";
|
||||||
import img4 from "~/assets/images/public/bigScreen/w_ico2.png";
|
import img4 from "~/assets/images/public/bigScreen/w_ico2.png";
|
||||||
|
import { NS_BI } from "~/enumerate/namespace";
|
||||||
import Title from "~/pages/Container/Map/components/Content/IndexInfo/Title";
|
import Title from "~/pages/Container/Map/components/Content/IndexInfo/Title";
|
||||||
import { getWeather, getWeatherIcon } from "~/utils/weather";
|
import { getWeatherIcon } from "~/utils/weather";
|
||||||
import { initEcharts1 } from "./echarts";
|
import { initEcharts1 } from "./echarts";
|
||||||
import "./index.less";
|
import "./index.less";
|
||||||
|
|
||||||
function LeftScreen() {
|
function LeftScreen(props) {
|
||||||
const [weather, setWeather] = useState({});
|
const [weather, setWeather] = useState({});
|
||||||
const [block1List, setBlock1List] = useState([
|
const [block1List, setBlock1List] = useState([]);
|
||||||
{ id: 1, companyName: "新益公司", status: 0, preventiveMeasures: "远离大树、电线杆、简易房等..." },
|
const [block4List, setBlock4List] = useState([]);
|
||||||
{ 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 chartInstance = useRef(null);
|
||||||
const main1Ref = useRef(null);
|
const main1Ref = useRef(null);
|
||||||
|
|
||||||
const loadWeather = async () => {
|
const loadWeather = async () => {
|
||||||
const result = await getWeather();
|
const { result } = await props["getWeather"]();
|
||||||
|
|
||||||
setWeather({
|
setWeather({
|
||||||
...result.now,
|
...result.now,
|
||||||
alertTitle: result.alerts?.[0]?.title || "当前暂无气象预警",
|
alertTitle: result.alerts?.[0]?.title || "当前暂无气象预警",
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const getEventReportListUnfinished = async () => {
|
||||||
|
const { data } = await props["getEventReportListUnfinished"]();
|
||||||
|
setBlock1List(data);
|
||||||
|
};
|
||||||
|
|
||||||
|
const getProjectTaskScoreCount = async () => {
|
||||||
|
const { data } = await props["getProjectTaskScoreCount"]();
|
||||||
|
initEcharts1(main1Ref, chartInstance, data);
|
||||||
|
};
|
||||||
|
|
||||||
|
const getHiddenStatisticsByCorp = async () => {
|
||||||
|
const { data } = await props["getHiddenStatisticsByCorp"]({ pageIndex: 1, pageSize: 999 });
|
||||||
|
setBlock4List(data);
|
||||||
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
loadWeather();
|
loadWeather();
|
||||||
|
getEventReportListUnfinished();
|
||||||
|
getHiddenStatisticsByCorp();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
useMount(() => {
|
useMount(() => {
|
||||||
initEcharts1(main1Ref, chartInstance, [
|
getProjectTaskScoreCount();
|
||||||
{ name: "新益公司", hazardCount: 123, unrectifiedCount: 23 },
|
|
||||||
{ name: "华泰化工", hazardCount: 85, unrectifiedCount: 15 },
|
|
||||||
{ name: "宏达制造", hazardCount: 67, unrectifiedCount: 12 },
|
|
||||||
{ name: "金鼎能源", hazardCount: 156, unrectifiedCount: 32 },
|
|
||||||
{ name: "瑞丰新材料", hazardCount: 42, unrectifiedCount: 8 },
|
|
||||||
{ name: "恒通物流", hazardCount: 78, unrectifiedCount: 18 },
|
|
||||||
{ name: "天成建筑", hazardCount: 93, unrectifiedCount: 23 },
|
|
||||||
{ name: "绿源环保", hazardCount: 56, unrectifiedCount: 11 },
|
|
||||||
{ name: "安泰消防", hazardCount: 112, unrectifiedCount: 22 },
|
|
||||||
{ name: "创新科技", hazardCount: 71, unrectifiedCount: 16 },
|
|
||||||
]);
|
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
if (chartInstance.current) {
|
if (chartInstance.current) {
|
||||||
chartInstance.current.dispose();
|
chartInstance.current.dispose();
|
||||||
|
|
@ -83,47 +70,51 @@ function LeftScreen() {
|
||||||
<div className="left-container_bg" style={{ backgroundImage: `url(${rightbg})` }}></div>
|
<div className="left-container_bg" style={{ backgroundImage: `url(${rightbg})` }}></div>
|
||||||
<div className="block1">
|
<div className="block1">
|
||||||
<Title title="天气预报情况" />
|
<Title title="天气预报情况" />
|
||||||
<div className="main">
|
<Spin spinning={props.bi.indexInfoWeatherLoading}>
|
||||||
<div className="list1">
|
<div className="main">
|
||||||
<img src={getWeatherIcon(weather?.text)} alt="" className="img1" />
|
<div className="list1">
|
||||||
<div>{weather?.text || "暂无数据"}</div>
|
<img src={getWeatherIcon(weather?.text)} alt="" className="img1" />
|
||||||
</div>
|
<div>{weather?.text || "暂无"}</div>
|
||||||
<div className="list1">
|
</div>
|
||||||
<img src={img3} alt="" className="img" />
|
<div className="list1">
|
||||||
<div className="info">
|
<img src={img3} alt="" className="img" />
|
||||||
<div>温度:</div>
|
<div className="info">
|
||||||
<div className="temp">{weather?.temp ? `${weather?.temp}℃` : "--"}</div>
|
<div>温度:</div>
|
||||||
|
<div className="temp">{weather?.temp ? `${weather?.temp}℃` : "--"}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="list1">
|
||||||
|
<img src={img4} alt="" className="img" />
|
||||||
|
<div className="info">
|
||||||
|
<div>风速:</div>
|
||||||
|
<div className="temp">{weather?.wind_class || "--"}</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="list1">
|
<div className="info">{weather?.alertTitle || "天气数据加载失败"}</div>
|
||||||
<img src={img4} alt="" className="img" />
|
</Spin>
|
||||||
<div className="info">
|
<Spin spinning={props.bi.indexInfoEmergencyRescueLoading}>
|
||||||
<div>风速:</div>
|
<div className="table">
|
||||||
<div className="temp">{weather?.wind_class || "--"}</div>
|
<div className="head" style={{ backgroundImage: `url(${img5})` }}>
|
||||||
|
<div>公司名称</div>
|
||||||
|
<div>报警处置状态</div>
|
||||||
|
<div>应急报警信息</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div className="scroll">
|
||||||
</div>
|
<SeamlessScroll list={block1List} step={0.5}>
|
||||||
<div className="info">{weather?.alertTitle || "天气数据加载失败"}</div>
|
{block1List.map((item, index) => (
|
||||||
<div className="table">
|
<div className="table-container" style={{ backgroundImage: `url(${img6})` }} key={index}>
|
||||||
<div className="head" style={{ backgroundImage: `url(${img5})` }}>
|
<div className="table-item">{item.executorCorpName}</div>
|
||||||
<div>公司名称</div>
|
<div className="table-item">
|
||||||
<div>报警处置状态</div>
|
{{ 1: "未执行", 2: "已执行", 3: "进行中", 4: "已完成" }[item.isRescueExecuted]}
|
||||||
<div>应急报警信息</div>
|
</div>
|
||||||
</div>
|
<div className="table-item">{item.eventTitle}</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>
|
||||||
<div className="table-item">{item.preventiveMeasures}</div>
|
))}
|
||||||
</div>
|
</SeamlessScroll>
|
||||||
))}
|
</div>
|
||||||
</SeamlessScroll>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Spin>
|
||||||
</div>
|
</div>
|
||||||
<div className="block2">
|
<div className="block2">
|
||||||
<Title title="重大危险源运行情况" />
|
<Title title="重大危险源运行情况" />
|
||||||
|
|
@ -184,39 +175,43 @@ function LeftScreen() {
|
||||||
</div>
|
</div>
|
||||||
<div className="block3">
|
<div className="block3">
|
||||||
<Title title="领域工作情况统计" />
|
<Title title="领域工作情况统计" />
|
||||||
<div className="main">
|
<Spin spinning={props.bi.indexInfoDomainLoading}>
|
||||||
<div ref={main1Ref} style={{ width: "100%", height: "180px" }} />
|
<div className="main">
|
||||||
</div>
|
<div ref={main1Ref} style={{ width: "100%", height: "180px" }} />
|
||||||
|
</div>
|
||||||
|
</Spin>
|
||||||
</div>
|
</div>
|
||||||
<div className="block4">
|
<div className="block4">
|
||||||
<Title title="当前各公司隐患整改情况" />
|
<Title title="当前各公司隐患整改情况" />
|
||||||
<div className="main">
|
<Spin spinning={props.bi.indexInfoHiddenLoading}>
|
||||||
<div className="table">
|
<div className="main">
|
||||||
<div className="head" style={{ backgroundImage: `url(${img5})` }}>
|
<div className="table">
|
||||||
<div>公司名称</div>
|
<div className="head" style={{ backgroundImage: `url(${img5})` }}>
|
||||||
<div>发现隐患数</div>
|
<div>公司名称</div>
|
||||||
<div>整改隐患数</div>
|
<div>发现隐患数</div>
|
||||||
<div>待整改</div>
|
<div>整改隐患数</div>
|
||||||
<div>待验收</div>
|
<div>待整改</div>
|
||||||
</div>
|
<div>待验收</div>
|
||||||
<div className="scroll">
|
</div>
|
||||||
<SeamlessScroll list={block4List} step={0.5}>
|
<div className="scroll">
|
||||||
{block4List.map((item, index) => (
|
<SeamlessScroll list={block4List} step={0.5}>
|
||||||
<div className="table-container" style={{ backgroundImage: `url(${img6})` }} key={index}>
|
{block4List.map((item, index) => (
|
||||||
<div className="table-item">{item.companyName}</div>
|
<div className="table-container" style={{ backgroundImage: `url(${img6})` }} key={index}>
|
||||||
<div className="table-item">{item.foundHazards}</div>
|
<div className="table-item">{item.corpName}</div>
|
||||||
<div className="table-item">{item.resolvedHazards}</div>
|
<div className="table-item">{item.findHiddenCount}</div>
|
||||||
<div className="table-item">{item.pendingResolution}</div>
|
<div className="table-item">{item.rectifyHiddenCount}</div>
|
||||||
<div className="table-item">{item.pendingAcceptance}</div>
|
<div className="table-item">{item.waitRectifyHiddenCount}</div>
|
||||||
</div>
|
<div className="table-item">{item.waitAcceptHiddenCount}</div>
|
||||||
))}
|
</div>
|
||||||
</SeamlessScroll>
|
))}
|
||||||
|
</SeamlessScroll>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Spin>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default LeftScreen;
|
export default Connect([NS_BI], true)(LeftScreen);
|
||||||
|
|
|
||||||
|
|
@ -74,22 +74,11 @@
|
||||||
.table-container {
|
.table-container {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr 1fr 2fr;
|
grid-template-columns: 1fr 1fr 2fr;
|
||||||
|
gap: 5px;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
margin: 5px auto;
|
margin: 5px auto;
|
||||||
|
|
||||||
.fc1 {
|
|
||||||
color: #0c90ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fc2 {
|
|
||||||
color: #62b13f;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fc3 {
|
|
||||||
color: #ffa105;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,6 @@
|
||||||
import { useState } from "react";
|
import { Connect } from "@cqsjjb/jjb-dva-runtime";
|
||||||
|
import { Spin } from "antd";
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
|
import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
|
||||||
import img8 from "~/assets/images/public/bigScreen/bg11.png";
|
import img8 from "~/assets/images/public/bigScreen/bg11.png";
|
||||||
import img9 from "~/assets/images/public/bigScreen/bg12.png";
|
import img9 from "~/assets/images/public/bigScreen/bg12.png";
|
||||||
|
|
@ -9,115 +11,101 @@ import img7 from "~/assets/images/public/bigScreen/ico9.png";
|
||||||
import rightbg from "~/assets/images/public/bigScreen/leftbg.png";
|
import rightbg from "~/assets/images/public/bigScreen/leftbg.png";
|
||||||
import img5 from "~/assets/images/public/bigScreen/tablebg1.png";
|
import img5 from "~/assets/images/public/bigScreen/tablebg1.png";
|
||||||
import img6 from "~/assets/images/public/bigScreen/tablebg2.png";
|
import img6 from "~/assets/images/public/bigScreen/tablebg2.png";
|
||||||
|
import { NS_BI } from "~/enumerate/namespace";
|
||||||
import Title from "~/pages/Container/Map/components/Content/IndexInfo/Title";
|
import Title from "~/pages/Container/Map/components/Content/IndexInfo/Title";
|
||||||
import "./index.less";
|
import "./index.less";
|
||||||
|
|
||||||
function RightScreen() {
|
function RightScreen(props) {
|
||||||
const [block1List, setBlock1List] = useState([
|
const [block1List, setBlock1List] = useState([]);
|
||||||
{ id: 1, companyName: "方宇物业", pendingApprovalProjects: 2, pendingTrainingSubmissions: 3, pendingTrainees: 4 },
|
const [block2List, setBlock2List] = useState([
|
||||||
{ id: 2, companyName: "华泰建设工程", pendingApprovalProjects: 5, pendingTrainingSubmissions: 8, pendingTrainees: 12 },
|
{ name: "三人以上作业", doingCount: 0, appliedCount: 0, img: img2 },
|
||||||
{ id: 3, companyName: "宏达设备维护", pendingApprovalProjects: 3, pendingTrainingSubmissions: 6, pendingTrainees: 9 },
|
{ name: "危险作业", doingCount: 0, appliedCount: 0, img: img3 },
|
||||||
{ id: 4, companyName: "金鼎安全服务", pendingApprovalProjects: 7, pendingTrainingSubmissions: 10, pendingTrainees: 15 },
|
{ name: "夜间作业", doingCount: 0, appliedCount: 0, img: img4 },
|
||||||
{ id: 5, companyName: "瑞丰技术服务", pendingApprovalProjects: 4, pendingTrainingSubmissions: 5, pendingTrainees: 7 },
|
{ name: "四新作业", doingCount: 0, appliedCount: 0, img: img7 },
|
||||||
{ 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: "未处置" },
|
|
||||||
]);
|
]);
|
||||||
|
const [block4List, setBlock4List] = useState([]);
|
||||||
|
|
||||||
|
const getXgfStatisticsListCorpStatistics = async () => {
|
||||||
|
const { data } = await props["getXgfStatisticsListCorpStatistics"]();
|
||||||
|
setBlock1List(data);
|
||||||
|
};
|
||||||
|
const getAlarmRecordScreenIotDeviceAlarmPage = async () => {
|
||||||
|
const { data } = await props["getAlarmRecordScreenIotDeviceAlarmPage"]();
|
||||||
|
setBlock4List(data);
|
||||||
|
};
|
||||||
|
const getEightWorkInfoDangerWorkStatistics = async () => {
|
||||||
|
const { data } = await props["getEightWorkInfoDangerWorkStatistics"]();
|
||||||
|
setBlock2List((prevState) => {
|
||||||
|
prevState[1].doingCount = data.doingCount;
|
||||||
|
prevState[1].appliedCount = data.appliedCount;
|
||||||
|
return [...prevState];
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
getXgfStatisticsListCorpStatistics();
|
||||||
|
getAlarmRecordScreenIotDeviceAlarmPage();
|
||||||
|
getEightWorkInfoDangerWorkStatistics();
|
||||||
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="right-container">
|
<div className="right-container">
|
||||||
<div className="right-container_bg" style={{ backgroundImage: `url(${rightbg})` }}></div>
|
<div className="right-container_bg" style={{ backgroundImage: `url(${rightbg})` }}></div>
|
||||||
<div className="block1">
|
<div className="block1">
|
||||||
<Title title="相关方单位情况统计" />
|
<Title title="相关方单位情况统计" />
|
||||||
<div className="main">
|
<Spin spinning={props.bi.indexInfoXgfManagerLoading}>
|
||||||
<div className="table">
|
<div className="main">
|
||||||
<div className="head" style={{ backgroundImage: `url(${img5})` }}>
|
<div className="table">
|
||||||
<div>相关方单位名称</div>
|
<div className="head" style={{ backgroundImage: `url(${img5})` }}>
|
||||||
<div>资质申请情况</div>
|
<div>相关方单位名称</div>
|
||||||
<div>项目执行情况</div>
|
<div>资质申请情况</div>
|
||||||
<div>执行人员情况</div>
|
<div>项目执行情况</div>
|
||||||
</div>
|
<div>执行人员情况</div>
|
||||||
<div className="scroll">
|
</div>
|
||||||
<SeamlessScroll list={block1List} step={0.5}>
|
<div className="scroll">
|
||||||
{block1List.map((item, index) => (
|
<SeamlessScroll list={block1List} step={0.5}>
|
||||||
<div className="table-container" style={{ backgroundImage: `url(${img6})` }} key={index}>
|
{block1List.map((item, index) => (
|
||||||
<div className="table-item">{item.companyName}</div>
|
<div className="table-container" style={{ backgroundImage: `url(${img6})` }} key={index}>
|
||||||
<div className="table-item">{item.pendingApprovalProjects}</div>
|
<div className="table-item">{item.corpName}</div>
|
||||||
<div className="table-item">{item.pendingTrainingSubmissions}</div>
|
<div className="table-item">{`${item.qualificationsPassedCount}/${item.qualificationsApplyCount}`}</div>
|
||||||
<div className="table-item">{item.pendingTrainees}</div>
|
<div className="table-item">{`${item.executingProjectCount}/${item.applyProjectCount}`}</div>
|
||||||
</div>
|
<div className="table-item">{`${item.trainingPassedCount}/${item.projectUserCount}`}</div>
|
||||||
))}
|
</div>
|
||||||
</SeamlessScroll>
|
))}
|
||||||
|
</SeamlessScroll>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Spin>
|
||||||
</div>
|
</div>
|
||||||
<div className="block2">
|
<div className="block2">
|
||||||
<Title title="重点作业管理统计" />
|
<Title title="重点作业管理统计" />
|
||||||
<div className="main">
|
<Spin spinning={props.bi.indexInfoEightWorkLoading}>
|
||||||
<div className="item">
|
<div className="main">
|
||||||
<div className="img">
|
{
|
||||||
<img src={img2} alt="" />
|
block2List.map((item, index) => (
|
||||||
</div>
|
<div className="item" key={index}>
|
||||||
<div className="info">
|
<div className="img">
|
||||||
<div className="title">三人以上作业</div>
|
<img src={item.img} alt="" />
|
||||||
<div>
|
</div>
|
||||||
<p> 当前作业数:13</p>
|
<div className="info">
|
||||||
<p>申请数:14</p>
|
<div className="title">{item.name}</div>
|
||||||
</div>
|
<div>
|
||||||
</div>
|
<p>
|
||||||
|
<span>当前作业数:</span>
|
||||||
|
<span>{item.doingCount}</span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<span>申请数:</span>
|
||||||
|
<span>{item.appliedCount}</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
<div className="item">
|
</Spin>
|
||||||
<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>
|
||||||
<div className="block3">
|
<div className="block3">
|
||||||
<Title title="当前口门、封闭区情况" />
|
<Title title="当前口门、封闭区情况" />
|
||||||
|
|
@ -154,31 +142,33 @@ function RightScreen() {
|
||||||
</div>
|
</div>
|
||||||
<div className="block4">
|
<div className="block4">
|
||||||
<Title title="物联网设备报警情况" />
|
<Title title="物联网设备报警情况" />
|
||||||
<div className="main">
|
<Spin spinning={props.bi.indexInfoIotalarmLoading}>
|
||||||
<div className="table">
|
<div className="main">
|
||||||
<div className="head" style={{ backgroundImage: `url(${img5})` }}>
|
<div className="table">
|
||||||
<div>设备类型</div>
|
<div className="head" style={{ backgroundImage: `url(${img5})` }}>
|
||||||
<div>所属单位</div>
|
<div>设备类型</div>
|
||||||
<div>报警类型</div>
|
<div>所属单位</div>
|
||||||
<div>处置状态</div>
|
<div>报警类型</div>
|
||||||
</div>
|
<div>处置状态</div>
|
||||||
<div className="scroll">
|
</div>
|
||||||
<SeamlessScroll list={block4List} step={0.5}>
|
<div className="scroll">
|
||||||
{block4List.map((item, index) => (
|
<SeamlessScroll list={block4List} step={0.5}>
|
||||||
<div className="table-container" style={{ backgroundImage: `url(${img6})` }} key={index}>
|
{block4List.map((item, index) => (
|
||||||
<div className="table-item">{item.companyName}</div>
|
<div className="table-container" style={{ backgroundImage: `url(${img6})` }} key={index}>
|
||||||
<div className="table-item">{item.detectionSystem}</div>
|
<div className="table-item">{item.alarmSourceName}</div>
|
||||||
<div className="table-item">{item.alarmReason}</div>
|
<div className="table-item">{item.corpName}</div>
|
||||||
<div className="table-item">{item.dispositionStatus}</div>
|
<div className="table-item">{item.alarmTypeName}</div>
|
||||||
</div>
|
<div className="table-item">{{ 10: "报警中", 20: "未处置", 30: "已消警" }[item.status]}</div>
|
||||||
))}
|
</div>
|
||||||
</SeamlessScroll>
|
))}
|
||||||
|
</SeamlessScroll>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Spin>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default RightScreen;
|
export default Connect([NS_BI], true)(RightScreen);
|
||||||
|
|
|
||||||
|
|
@ -33,7 +33,7 @@
|
||||||
|
|
||||||
.head {
|
.head {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr 1fr 1.5fr 1fr;
|
grid-template-columns: 1.5fr 1fr 1fr 1fr;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
|
|
||||||
|
|
@ -48,25 +48,13 @@
|
||||||
|
|
||||||
.table-container {
|
.table-container {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr 1fr 1.5fr 1fr;
|
grid-template-columns: 1.5fr 1fr 1fr 1fr;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
|
|
||||||
margin: 5px auto;
|
margin: 5px auto;
|
||||||
background: rgba(17, 51, 122, 0.5);
|
background: rgba(17, 51, 122, 0.5);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
.fc1 {
|
|
||||||
color: #0c90ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fc2 {
|
|
||||||
color: #62b13f;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fc3 {
|
|
||||||
color: #ffa105;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -174,18 +162,6 @@
|
||||||
margin: 5px auto;
|
margin: 5px auto;
|
||||||
background: rgba(17, 51, 122, 0.5);
|
background: rgba(17, 51, 122, 0.5);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
.fc1 {
|
|
||||||
color: #0c90ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fc2 {
|
|
||||||
color: #62b13f;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fc3 {
|
|
||||||
color: #ffa105;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -91,7 +91,7 @@ function IndexLeft() {
|
||||||
<div className="img">
|
<div className="img">
|
||||||
<img src={getWeatherIcon(weatherData.text)} alt="" />
|
<img src={getWeatherIcon(weatherData.text)} alt="" />
|
||||||
</div>
|
</div>
|
||||||
<div className="text">{weatherData.text || "暂无数据"}</div>
|
<div className="text">{weatherData.text || "暂无"}</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="items">
|
<div className="items">
|
||||||
<div className="item">
|
<div className="item">
|
||||||
|
|
|
||||||
|
|
@ -55,7 +55,7 @@ function QiXiang() {
|
||||||
<div className="img">
|
<div className="img">
|
||||||
<img src={getWeatherIcon(weatherData.text)} alt="" />
|
<img src={getWeatherIcon(weatherData.text)} alt="" />
|
||||||
</div>
|
</div>
|
||||||
<div className="text">{weatherData.text || "暂无数据"}</div>
|
<div className="text">{weatherData.text || "暂无"}</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="items">
|
<div className="items">
|
||||||
<div className="item">
|
<div className="item">
|
||||||
|
|
|
||||||
|
|
@ -54,7 +54,7 @@ export function mapReducer(state, action) {
|
||||||
case MAP_ACTION.RESET_BOTTOM_UTILS:
|
case MAP_ACTION.RESET_BOTTOM_UTILS:
|
||||||
return {
|
return {
|
||||||
...state,
|
...state,
|
||||||
bottomUtilsCurrentIndex: state.bottomUtilsCurrentIndex || -1,
|
bottomUtilsCurrentIndex: -1,
|
||||||
bottomUtilsResetVersion: state.bottomUtilsResetVersion + 1,
|
bottomUtilsResetVersion: state.bottomUtilsResetVersion + 1,
|
||||||
};
|
};
|
||||||
case MAP_ACTION.RESET_RIGHT_UTILS:
|
case MAP_ACTION.RESET_RIGHT_UTILS:
|
||||||
|
|
|
||||||
|
|
@ -184,7 +184,7 @@ function CenterPanel() {
|
||||||
<div className="img">
|
<div className="img">
|
||||||
<img src={getWeatherIcon(weatherData.text)} alt="" />
|
<img src={getWeatherIcon(weatherData.text)} alt="" />
|
||||||
</div>
|
</div>
|
||||||
<div className="text">{weatherData.text || "暂无数据"}</div>
|
<div className="text">{weatherData.text || "暂无"}</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="items">
|
<div className="items">
|
||||||
<div className="item">
|
<div className="item">
|
||||||
|
|
|
||||||
|
|
@ -25,8 +25,6 @@ const WEATHER_URL = "https://api.map.baidu.com/weather/v1/?district_id=130300&da
|
||||||
* @returns {Promise<object>} 百度天气接口 result 数据。
|
* @returns {Promise<object>} 百度天气接口 result 数据。
|
||||||
*/
|
*/
|
||||||
export async function getWeather(options = {}) {
|
export async function getWeather(options = {}) {
|
||||||
return {}; // TODO: Remove this line
|
|
||||||
|
|
||||||
const response = await fetch(WEATHER_URL, { signal: options.signal });
|
const response = await fetch(WEATHER_URL, { signal: options.signal });
|
||||||
if (!response.ok) {
|
if (!response.ok) {
|
||||||
message.error("天气接口请求失败,请检查网络或稍后再试");
|
message.error("天气接口请求失败,请检查网络或稍后再试");
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue