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

地图首页接口对接

master
LiuJiaNan 2026-07-17 17:35:09 +08:00
parent 565670d59a
commit 9310c86fd0
16 changed files with 376 additions and 342 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
jjb.config.js
View File

@ -9,15 +9,13 @@ module.exports = {
// 应用后端分支名称，部署上线需要
javaGitBranch: "<branch-name>",
// 接口服务地址
// API_HOST: "https://gbs-gateway.qhdsafety.com",
API_HOST: "http://192.168.20.100:30140",
API_HOST: "https://gbs-gateway.qhdsafety.com",
},
production: {
// 应用后端分支名称，部署上线需要
javaGitBranch: "<branch-name>",
// 接口服务地址
// API_HOST: "",
API_HOST: "https://gbs-gateway.qhdsafety.com",
API_HOST: "",
},
},
// 应用唯一标识符

44
src/api/bi/index.js
View File

@ -1,6 +1,42 @@
import { declareRequest } from '@cqsjjb/jjb-dva-runtime';
import { declareRequest } from "@cqsjjb/jjb-dva-runtime";
export const getWeather = declareRequest(
'biLoading',
'Get > https://api.map.baidu.com/weather/v1/?district_id=130300&data_type=all&ak=dIqOi34IlTg5FkNck1vqoBpLhPAj36S1',
);
"indexInfoWeatherLoading",
"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",
);

2
src/enumerate/namespace/index.js
View File

@ -6,4 +6,4 @@ import { defineNamespace } from "@cqsjjb/jjb-dva-runtime";
export const NS_GLOBAL = defineNamespace("global");
export const NS_BI = defineNamespace("bi");
export const NS_BI = defineNamespace("bi");

2
src/pages/Container/Map/components/BottomUtils/portUtilsList.js
View File

@ -199,7 +199,7 @@ export const portUtilsList = [
{
img: bottomImg6,
checkImg: bottomImg6On,
label: "危险作业",
label: "重点作业",
type: "danger",
list: [
{

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

@ -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 { randoms } from "zy-react-library/utils";
import img2 from "~/assets/images/public/bigScreen/bg13.png";
import img3 from "~/assets/images/public/bigScreen/bg14.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 "./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 (
<div className="bottom-container_con">
<div className="top_container">
@ -28,59 +65,66 @@ function BottomScreen() {
<div className="bottom-container">
<div className="left">
<Title title="相关方单位备案与项目执行统计" />
<div className="main" style={{ backgroundImage: `url(${img2})` }}>
<div className="table">
<div className="head">
<div>备案类型</div>
<div>主管部门</div>
<div>相关方单位备案情况</div>
<div>项目执行情况统计</div>
<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 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>
<Spin spinning={props.bi.indexInfoXgfManagerProjectLoading}>
<div className="main" style={{ backgroundImage: `url(${img2})` }}>
<div className="table">
<div className="head">
<div>备案类型</div>
<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" key={index}>
<div className="table-item">{item.qualificationsTypeName}</div>
<div className="table-item">{item.managerDeptName}</div>
<div className="table-item">{`${item.completedRecordCount}/${item.applyRecordCount}`}</div>
<div className="table-item">{`${item.executingProjectCount}/${item.projectCount}`}</div>
<div className="table-item">{`${item.trainingPassedCount}/${item.projectUserCount}`}</div>
</div>
))}
</SeamlessScroll>
</div>
</div>
</div>
</div>
</Spin>
</div>
<div className="right">
<Title title="视频巡屏" />
<div className="main">
<div className="menu">
<div className="list active">新益公司</div>
<div className="list">二公司</div>
<div className="list">六公司</div>
<div className="list">七公司</div>
<div className="list">九公司</div>
</div>
<Spin spinning={props.bi.indexInfoVideoPatrolLoading}>
<div className="menu">
{
block2List.map((item, index) => (
<div
className={`list ${item.corpinfoName === active ? "active" : ""}`}
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})` }}>
<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>
@ -89,4 +133,4 @@ function BottomScreen() {
);
}
export default BottomScreen;
export default Connect([NS_BI], true)(BottomScreen);

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

@ -73,6 +73,11 @@
font-weight: bold;
}
.scroll{
height: 140px;
overflow-y: hidden;
}
.table-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
@ -81,18 +86,6 @@
margin: 0 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;
@ -124,6 +117,7 @@
text-align: center;
line-height: 30px;
padding: 5px;
overflow-y: auto;
.list {
border-radius: 5px;
@ -151,6 +145,12 @@
flex: 1;
margin-left: 10px;
padding: 10px;
.no-video{
color: #fff;
text-align: center;
line-height: 160px;
}
}
}
}

30
src/pages/Container/Map/components/Content/IndexInfo/LeftPanel/echarts.js
View File

@ -3,9 +3,9 @@ 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 domainTypeName = data.map(item => item.domainTypeName);
const scoredCount = data.map(item => item.scoredCount);
const noScoreCount = data.map(item => item.noScoreCount);
const option = {
tooltip: {
@ -16,7 +16,7 @@ export const initEcharts1 = (main1Ref, chartInstance, data) => {
},
grid: {
left: "10%",
top: "28%",
top: "20%",
right: "10%",
bottom: "25%",
},
@ -30,6 +30,15 @@ export const initEcharts1 = (main1Ref, chartInstance, data) => {
},
},
dataZoom: [
{
type: "inside",
xAxisIndex: 0,
start: 0,
end: 50,
zoomOnMouseWheel: "shift",
moveOnMouseWheel: true,
moveOnMouseMove: true,
},
{
type: "slider",
height: 6,
@ -47,7 +56,7 @@ export const initEcharts1 = (main1Ref, chartInstance, data) => {
},
],
xAxis: {
data: companyNames,
data: domainTypeName,
axisLine: {
show: false,
},
@ -60,7 +69,6 @@ export const initEcharts1 = (main1Ref, chartInstance, data) => {
color: "#FFFFFF",
fontSize: 12,
margin: 12,
interval: 0,
},
},
yAxis: [
@ -73,8 +81,8 @@ export const initEcharts1 = (main1Ref, chartInstance, data) => {
splitLine: {
show: true,
lineStyle: {
color: "#000000",
type: "solid",
color: "#fff",
type: "dashed",
},
},
axisTick: {
@ -97,9 +105,9 @@ export const initEcharts1 = (main1Ref, chartInstance, data) => {
barWidth: 10,
yAxisIndex: 0,
itemStyle: {
color: "#C5993B",
color: "#53ed06",
},
data: hazardCounts,
data: scoredCount,
},
{
name: "未评分",
@ -109,7 +117,7 @@ export const initEcharts1 = (main1Ref, chartInstance, data) => {
itemStyle: {
color: "#FF0606",
},
data: unrectifiedCounts,
data: noScoreCount,
},
],
};

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

@ -1,4 +1,6 @@
import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { useMount } from "ahooks";
import { Spin } from "antd";
import { useEffect, useRef, useState } from "react";
import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
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 img3 from "~/assets/images/public/bigScreen/w_ico1.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 { getWeather, getWeatherIcon } from "~/utils/weather";
import { getWeatherIcon } from "~/utils/weather";
import { initEcharts1 } from "./echarts";
import "./index.less";
function LeftScreen() {
function LeftScreen(props) {
const [weather, setWeather] = useState({});
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 [block1List, setBlock1List] = useState([]);
const [block4List, setBlock4List] = useState([]);
const chartInstance = useRef(null);
const main1Ref = useRef(null);
const loadWeather = async () => {
const result = await getWeather();
const { result } = await props["getWeather"]();
setWeather({
...result.now,
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(() => {
loadWeather();
getEventReportListUnfinished();
getHiddenStatisticsByCorp();
}, []);
useMount(() => {
initEcharts1(main1Ref, chartInstance, [
{ 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 },
]);
getProjectTaskScoreCount();
return () => {
if (chartInstance.current) {
chartInstance.current.dispose();
@ -83,47 +70,51 @@ function LeftScreen() {
<div className="left-container_bg" style={{ backgroundImage: `url(${rightbg})` }}></div>
<div className="block1">
<Title title="天气预报情况" />
<div className="main">
<div className="list1">
<img src={getWeatherIcon(weather?.text)} alt="" className="img1" />
<div>{weather?.text || "暂无数据"}</div>
</div>
<div className="list1">
<img src={img3} alt="" className="img" />
<div className="info">
<div>温度：</div>
<div className="temp">{weather?.temp ? `${weather?.temp}℃` : "--"}</div>
<Spin spinning={props.bi.indexInfoWeatherLoading}>
<div className="main">
<div className="list1">
<img src={getWeatherIcon(weather?.text)} alt="" className="img1" />
<div>{weather?.text || "暂无"}</div>
</div>
<div className="list1">
<img src={img3} alt="" className="img" />
<div className="info">
<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 className="list1">
<img src={img4} alt="" className="img" />
<div className="info">
<div>风速：</div>
<div className="temp">{weather?.wind_class || "--"}</div>
<div className="info">{weather?.alertTitle || "天气数据加载失败"}</div>
</Spin>
<Spin spinning={props.bi.indexInfoEmergencyRescueLoading}>
<div className="table">
<div className="head" style={{ backgroundImage: `url(${img5})` }}>
<div>公司名称</div>
<div>报警处置状态</div>
<div>应急报警信息</div>
</div>
</div>
</div>
<div className="info">{weather?.alertTitle || "天气数据加载失败"}</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 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.executorCorpName}</div>
<div className="table-item">
{{ 1: "未执行", 2: "已执行", 3: "进行中", 4: "已完成" }[item.isRescueExecuted]}
</div>
<div className="table-item">{item.eventTitle}</div>
</div>
<div className="table-item">{item.preventiveMeasures}</div>
</div>
))}
</SeamlessScroll>
))}
</SeamlessScroll>
</div>
</div>
</div>
</Spin>
</div>
<div className="block2">
<Title title="重大危险源运行情况" />
@ -184,39 +175,43 @@ function LeftScreen() {
</div>
<div className="block3">
<Title title="领域工作情况统计" />
<div className="main">
<div ref={main1Ref} style={{ width: "100%", height: "180px" }} />
</div>
<Spin spinning={props.bi.indexInfoDomainLoading}>
<div className="main">
<div ref={main1Ref} style={{ width: "100%", height: "180px" }} />
</div>
</Spin>
</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>
<Spin spinning={props.bi.indexInfoHiddenLoading}>
<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.corpName}</div>
<div className="table-item">{item.findHiddenCount}</div>
<div className="table-item">{item.rectifyHiddenCount}</div>
<div className="table-item">{item.waitRectifyHiddenCount}</div>
<div className="table-item">{item.waitAcceptHiddenCount}</div>
</div>
))}
</SeamlessScroll>
</div>
</div>
</div>
</div>
</Spin>
</div>
</div>
);
}
export default LeftScreen;
export default Connect([NS_BI], true)(LeftScreen);

13
src/pages/Container/Map/components/Content/IndexInfo/LeftPanel/index.less
View File

@ -74,22 +74,11 @@
.table-container {
display: grid;
grid-template-columns: 1fr 1fr 2fr;
gap: 5px;
color: #ffffff;
padding: 5px;
font-size: 12px;
margin: 5px auto;
.fc1 {
color: #0c90ff;
}
.fc2 {
color: #62b13f;
}
.fc3 {
color: #ffa105;
}
}
}
}

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

@ -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 img8 from "~/assets/images/public/bigScreen/bg11.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 img5 from "~/assets/images/public/bigScreen/tablebg1.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 "./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: "未处置" },
function RightScreen(props) {
const [block1List, setBlock1List] = useState([]);
const [block2List, setBlock2List] = useState([
{ name: "三人以上作业", doingCount: 0, appliedCount: 0, img: img2 },
{ name: "危险作业", doingCount: 0, appliedCount: 0, img: img3 },
{ name: "夜间作业", doingCount: 0, appliedCount: 0, img: img4 },
{ name: "四新作业", doingCount: 0, appliedCount: 0, img: img7 },
]);
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 (
<div className="right-container">
<div className="right-container_bg" style={{ backgroundImage: `url(${rightbg})` }}></div>
<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>
<Spin spinning={props.bi.indexInfoXgfManagerLoading}>
<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.corpName}</div>
<div className="table-item">{`${item.qualificationsPassedCount}/${item.qualificationsApplyCount}`}</div>
<div className="table-item">{`${item.executingProjectCount}/${item.applyProjectCount}`}</div>
<div className="table-item">{`${item.trainingPassedCount}/${item.projectUserCount}`}</div>
</div>
))}
</SeamlessScroll>
</div>
</div>
</div>
</div>
</Spin>
</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>
<Spin spinning={props.bi.indexInfoEightWorkLoading}>
<div className="main">
{
block2List.map((item, index) => (
<div className="item" key={index}>
<div className="img">
<img src={item.img} alt="" />
</div>
<div className="info">
<div className="title">{item.name}</div>
<div>
<p>
<span>当前作业数：</span>
<span>{item.doingCount}</span>
</p>
<p>
<span>申请数：</span>
<span>{item.appliedCount}</span>
</p>
</div>
</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>
</Spin>
</div>
<div className="block3">
<Title title="当前口门、封闭区情况" />
@ -154,31 +142,33 @@ function RightScreen() {
</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>
<Spin spinning={props.bi.indexInfoIotalarmLoading}>
<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.alarmSourceName}</div>
<div className="table-item">{item.corpName}</div>
<div className="table-item">{item.alarmTypeName}</div>
<div className="table-item">{{ 10: "报警中", 20: "未处置", 30: "已消警" }[item.status]}</div>
</div>
))}
</SeamlessScroll>
</div>
</div>
</div>
</div>
</Spin>
</div>
</div>
);
}
export default RightScreen;
export default Connect([NS_BI], true)(RightScreen);

28
src/pages/Container/Map/components/Content/IndexInfo/RightPanel/index.less
View File

@ -33,7 +33,7 @@
.head {
display: grid;
grid-template-columns: 1fr 1fr 1.5fr 1fr;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
color: #ffffff;
padding: 5px;
@ -48,25 +48,13 @@
.table-container {
display: grid;
grid-template-columns: 1fr 1fr 1.5fr 1fr;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
color: #ffffff;
padding: 5px;
margin: 5px auto;
background: rgba(17, 51, 122, 0.5);
text-align: center;
.fc1 {
color: #0c90ff;
}
.fc2 {
color: #62b13f;
}
.fc3 {
color: #ffa105;
}
}
}
}
@ -174,18 +162,6 @@
margin: 5px auto;
background: rgba(17, 51, 122, 0.5);
text-align: center;
.fc1 {
color: #0c90ff;
}
.fc2 {
color: #62b13f;
}
.fc3 {
color: #ffa105;
}
}
}
}

2
src/pages/Container/Map/components/Content/branchOffice/IndexLeft/index.js
View File

@ -91,7 +91,7 @@ function IndexLeft() {
<div className="img">
<img src={getWeatherIcon(weatherData.text)} alt="" />
</div>
<div className="text">{weatherData.text || "暂无数据"}</div>
<div className="text">{weatherData.text || "暂无"}</div>
</div>
<div className="items">
<div className="item">

2
src/pages/Container/Map/components/Content/branchOffice/QiXiang/index.js
View File

@ -55,7 +55,7 @@ function QiXiang() {
<div className="img">
<img src={getWeatherIcon(weatherData.text)} alt="" />
</div>
<div className="text">{weatherData.text || "暂无数据"}</div>
<div className="text">{weatherData.text || "暂无"}</div>
</div>
<div className="items">
<div className="item">

2
src/pages/Container/Map/js/context.js
View File

@ -54,7 +54,7 @@ export function mapReducer(state, action) {
case MAP_ACTION.RESET_BOTTOM_UTILS:
return {
...state,
bottomUtilsCurrentIndex: state.bottomUtilsCurrentIndex || -1,
bottomUtilsCurrentIndex: -1,
bottomUtilsResetVersion: state.bottomUtilsResetVersion + 1,
};
case MAP_ACTION.RESET_RIGHT_UTILS:

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

@ -184,7 +184,7 @@ function CenterPanel() {
<div className="img">
<img src={getWeatherIcon(weatherData.text)} alt="" />
</div>
<div className="text">{weatherData.text || "暂无数据"}</div>
<div className="text">{weatherData.text || "暂无"}</div>
</div>
<div className="items">
<div className="item">

2
src/utils/weather.js
View File

@ -25,8 +25,6 @@ const WEATHER_URL = "https://api.map.baidu.com/weather/v1/?district_id=130300&da
* @returns {Promise<object>} 百度天气接口 result 数据。
*/
export async function getWeather(options = {}) {
return {}; // TODO: Remove this line
const response = await fetch(WEATHER_URL, { signal: options.signal });
if (!response.ok) {
message.error("天气接口请求失败，请检查网络或稍后再试");