-
分子公司考核情况
+
@@ -69,7 +70,7 @@ function BottomScreen() {
-
视频巡屏
+
新益公司
@@ -79,13 +80,12 @@ function BottomScreen() {
九公司
-
);
}
diff --git a/src/pages/Container/Map/components/Content/IndexInfo/Bottom/index.less b/src/pages/Container/Map/components/Content/IndexInfo/Bottom/index.less
new file mode 100644
index 0000000..06a09ad
--- /dev/null
+++ b/src/pages/Container/Map/components/Content/IndexInfo/Bottom/index.less
@@ -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;
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/src/pages/Container/Map/components/Content/IndexInfo/LeftPanel/echarts.js b/src/pages/Container/Map/components/Content/IndexInfo/LeftPanel/echarts.js
new file mode 100644
index 0000000..5edb898
--- /dev/null
+++ b/src/pages/Container/Map/components/Content/IndexInfo/LeftPanel/echarts.js
@@ -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);
+};
diff --git a/src/pages/Container/Map/components/Content/IndexInfo/LeftPanel/index.js b/src/pages/Container/Map/components/Content/IndexInfo/LeftPanel/index.js
new file mode 100644
index 0000000..d27fd65
--- /dev/null
+++ b/src/pages/Container/Map/components/Content/IndexInfo/LeftPanel/index.js
@@ -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 (
+
+
+
+
+
+
+
晴
+
+
+
+
+
+
+
+
+
+
+
+ 秦皇岛市气象台发布大风橙色预警[工级/严重]
+
+
+
+
+
+ {block1List.map((item, index) => (
+
+
{item.companyName}
+
+ {item.status === 0 ? "未处置" : item.status === 1 ? "已处置" : "处置中"}
+
+
{item.preventiveMeasures}
+
+
+
+
+
+
+
+
+
+ 北区二号罐液位过低
+
+
+
+
二级重大危险源（1个）
+
+
储罐数：3
+
再用数：3
+
+ 停用数：
+ 2
+
+
+
+
+
三级重大危险源（2个）
+
+
储罐数：10
+
再用数：10
+
+ 停用数：
+ 0
+
+
+
+
+
+
+
+
报警处置情况
+
+
温度待处置数/报警个数：0/0
+
压力待处置数/报警个数：0/0
+
液位待处置数/报警个数：1/1
+
+
+
+
+
+
+
+
+
+
+
+
公司名称
+
发现隐患数
+
整改隐患数
+
待整改
+
待验收
+
+
+
+ {block4List.map((item, index) => (
+
+
{item.companyName}
+
{item.foundHazards}
+
{item.resolvedHazards}
+
{item.pendingResolution}
+
{item.pendingAcceptance}
+
+
+
+
+
+
+ );
+}
+
+export default LeftScreen;
diff --git a/src/pages/Container/Map/components/Content/IndexInfo/LeftPanel/index.less b/src/pages/Container/Map/components/Content/IndexInfo/LeftPanel/index.less
new file mode 100644
index 0000000..2066632
--- /dev/null
+++ b/src/pages/Container/Map/components/Content/IndexInfo/LeftPanel/index.less
@@ -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;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/src/pages/Container/Map/components/Content/IndexInfo/RightPanel/index.js b/src/pages/Container/Map/components/Content/IndexInfo/RightPanel/index.js
new file mode 100644
index 0000000..a192d2e
--- /dev/null
+++ b/src/pages/Container/Map/components/Content/IndexInfo/RightPanel/index.js
@@ -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 (
+
+
+
+
+
+
+
单位名称
+
待审批项目数
+
待提交培训人员数
+
待培训人数
+
+
+
+ {block1List.map((item, index) => (
+
+
{item.companyName}
+
{item.pendingApprovalProjects}
+
{item.pendingTrainingSubmissions}
+
{item.pendingTrainees}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
公司名称
+
检测系统
+
报警原因
+
处置状态
+
+
+
+ {block4List.map((item, index) => (
+
+
{item.companyName}
+
{item.detectionSystem}
+
{item.alarmReason}
+
{item.dispositionStatus}
+
+
+
+
+
+
+ );
+}
+
+export default RightScreen;
diff --git a/src/pages/Container/Map/components/Content/IndexInfo/RightPanel/index.less b/src/pages/Container/Map/components/Content/IndexInfo/RightPanel/index.less
new file mode 100644
index 0000000..7568d18
--- /dev/null
+++ b/src/pages/Container/Map/components/Content/IndexInfo/RightPanel/index.less
@@ -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;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/src/pages/Container/Bi/components/Search/index.js b/src/pages/Container/Map/components/Content/IndexInfo/Search/index.js
similarity index 100%
rename from src/pages/Container/Bi/components/Search/index.js
rename to src/pages/Container/Map/components/Content/IndexInfo/Search/index.js
diff --git a/src/pages/Container/Map/components/Content/IndexInfo/Search/index.less b/src/pages/Container/Map/components/Content/IndexInfo/Search/index.less
new file mode 100644
index 0000000..d6fc54d
--- /dev/null
+++ b/src/pages/Container/Map/components/Content/IndexInfo/Search/index.less
@@ -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;
+ }
+ }
+ }
+ }
+}
diff --git a/src/pages/Container/Map/components/Content/IndexInfo/Title/index.js b/src/pages/Container/Map/components/Content/IndexInfo/Title/index.js
new file mode 100644
index 0000000..2c10262
--- /dev/null
+++ b/src/pages/Container/Map/components/Content/IndexInfo/Title/index.js
@@ -0,0 +1,12 @@
+import img1 from "~/assets/images/public/bigScreen/smalltitle.png";
+import "./index.less";
+
+function Title(props) {
+ return (
+
+ {props.title}
+
+ );
+}
+
+export default Title;
diff --git a/src/pages/Container/Map/components/Content/IndexInfo/Title/index.less b/src/pages/Container/Map/components/Content/IndexInfo/Title/index.less
new file mode 100644
index 0000000..e86fc30
--- /dev/null
+++ b/src/pages/Container/Map/components/Content/IndexInfo/Title/index.less
@@ -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;
+ }
+}
diff --git a/src/pages/Container/Map/components/Content/IndexInfo/index.js b/src/pages/Container/Map/components/Content/IndexInfo/index.js
index 1463d90..c4096f6 100644
--- a/src/pages/Container/Map/components/Content/IndexInfo/index.js
+++ b/src/pages/Container/Map/components/Content/IndexInfo/index.js
@@ -1,69 +1,16 @@
-import { useState } from "react";
-import CountUp from "react-countup";
-import icon1 from "~/assets/images/map_bi/content/icon1.png";
-import icon2 from "~/assets/images/map_bi/content/icon2.png";
-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 Bottom from "./Bottom";
+import LeftPanel from "./LeftPanel";
+import RightPanel from "./RightPanel";
+import Search from "./Search";
import "./index.less";
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 (
-
-
-
- {block1OptionsList.map((item, index) => (
-
-
-
-
{item.label}
-
-
-
-
- ))}
-
-
-
-
-
-
- {block2OptionsList.map((item, index) => (
-
-
-
-
-
-
- ))}
-
-
+
+
+
+
);
}
diff --git a/src/pages/Container/Map/components/Content/IndexInfo/index.less b/src/pages/Container/Map/components/Content/IndexInfo/index.less
index cb6ab27..a2690ca 100644
--- a/src/pages/Container/Map/components/Content/IndexInfo/index.less
+++ b/src/pages/Container/Map/components/Content/IndexInfo/index.less
@@ -1,146 +1,3 @@
.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);
- }
- }
}
diff --git a/src/pages/Container/Map/components/Content/index.js b/src/pages/Container/Map/components/Content/index.js
index 050bf36..ff4cc7d 100644
--- a/src/pages/Container/Map/components/Content/index.js
+++ b/src/pages/Container/Map/components/Content/index.js
@@ -115,13 +115,13 @@ function Content() {
const renderContent = () => {
return (
<>
+ {!leftDisplayedContent.currentPort && (
)}
{isLeftVisible && (
- {!leftDisplayedContent.currentPort && }
{(leftDisplayedContent.currentPort === "00003" && !leftDisplayedContent.currentBranchOffice) && renderPortContent()}
{leftDisplayedContent.currentBranchOffice && renderBranchOfficeContentLeft()}
diff --git a/src/pages/Container/Map/components/RightUtils/index.js b/src/pages/Container/Map/components/RightUtils/index.js
index 2457eb3..4c05c19 100644
--- a/src/pages/Container/Map/components/RightUtils/index.js
+++ b/src/pages/Container/Map/components/RightUtils/index.js
@@ -29,7 +29,7 @@ function RightUtils(props) {
displayedMode: rightUtilsDisplayedMode,
isVisible: rightUtilsIsVisible,
} = useRightUtilsAnimation(
- !currentBranchOffice,
+ currentPort && !currentBranchOffice,
currentBranchOffice && bottomUtilsCurrentIndex !== -1,
);
- {" "}
- 返回
- 
- {" "}
- 企业已连续平安运行 1095 天
-