+
-
diff --git a/src/pages/Container/Bi/components/rightPanel/index.less b/src/pages/Container/Bi/components/RightPanel/index.less
similarity index 100%
rename from src/pages/Container/Bi/components/rightPanel/index.less
rename to src/pages/Container/Bi/components/RightPanel/index.less
diff --git a/src/pages/Container/Bi/components/Search/index.js b/src/pages/Container/Bi/components/Search/index.js
new file mode 100644
index 0000000..cf4dc38
--- /dev/null
+++ b/src/pages/Container/Bi/components/Search/index.js
@@ -0,0 +1,39 @@
+import img2 from "~/assets/images/public/bigScreen/close.png";
+import img1 from "~/assets/images/public/bigScreen/topbg.png";
+import "./index.less";
+
+function SearchScreen() {
+ return (
+
+
+
分公司列表
+
相关方列表
+
+

+
+
+
+
+
+ );
+}
+
+export default SearchScreen;
diff --git a/src/pages/Container/Bi/components/search/index.less b/src/pages/Container/Bi/components/Search/index.less
similarity index 100%
rename from src/pages/Container/Bi/components/search/index.less
rename to src/pages/Container/Bi/components/Search/index.less
diff --git a/src/pages/Container/Bi/components/leftPanel.js b/src/pages/Container/Bi/components/leftPanel.js
deleted file mode 100644
index 7b6dfe0..0000000
--- a/src/pages/Container/Bi/components/leftPanel.js
+++ /dev/null
@@ -1,632 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import * as echarts from 'echarts';
-import { Connect } from "@cqsjjb/jjb-dva-runtime";
-import { NS_BI } from "~/enumerate/namespace";
-
-import smallTitleImg from '../../../../assets/images/public/bigScreen/smalltitle.png'
-import temperature from '../../../../assets/images/public/bigScreen/img10.png'
-import windSpeed from '../../../../assets/images/public/bigScreen/img11.png'
-import hazardIcon from '../../../../assets/images/public/bigScreen/ico3.png'
-
-import SunIcon from '../../../../assets/images/public/weather/1.png'
-import CloudIcon from '../../../../assets/images/public/weather/2.png'
-import CloudSunIcon from '../../../../assets/images/public/weather/3.png'
-import ThunderstormIcon from '../../../../assets/images/public/weather/4.png'
-import MildRainIcon from '../../../../assets/images/public/weather/5.png'
-// 中雨 6.png
-import ModerateRainIcon from '../../../../assets/images/public/weather/6.png'
-// 大雨 7.png
-import HeavyRainIcon from '../../../../assets/images/public/weather/7.png'
-// 暴雨 8.png
-import StormRainIcon from '../../../../assets/images/public/weather/8.png'
-// 小雪 9.png
-import SnowIcon from '../../../../assets/images/public/weather/9.png'
-// 中雪 10.png
-import ModerateSnowIcon from '../../../../assets/images/public/weather/10.png'
-// 大雪 11.png
-import HeavySnowIcon from '../../../../assets/images/public/weather/11.png'
-// 雨夹雪 12.png
-import SnowRainIcon from '../../../../assets/images/public/weather/12.png'
-// 雾 13.png
-import FogIcon from '../../../../assets/images/public/weather/13.png'
-// 霾 14.png
-import HazeIcon from '../../../../assets/images/public/weather/14.png'
-// 浮尘 15.png
-import DustIcon from '../../../../assets/images/public/weather/15.png'
-// 沙尘暴 16.png
-import DuststormIcon from '../../../../assets/images/public/weather/16.png'
-
-
-
-// 天气类型与图标映射表
-const weatherIconMap = {
- // 晴天
- '晴天':

,
- '晴':

,
- // 多云
- '多云':

,
- '阴':

,
- // 雷阵雨
- '雷阵雨':

,
- // 小雨
- '小雨':

,
- // 中雨
- '中雨':

,
- // 大雨
- '大雨':

,
- // 暴雨
- '暴雨':

,
- // 小雪
- '小雪':

,
- // 中雪
- '中雪':

,
- // 大雪
- '大雪':

,
- // 雨夹雪
- '雨夹雪':

,
- // 雾
- '雾':

,
- // 霾
- '霾':

,
- // 浮尘
- '浮尘':

,
- // 沙尘暴
- '沙尘暴':

,
- // 默认图标
- '默认':

-};
-
-// 根据天气中文名称获取对应图标
-const getWeatherIcon = (weatherName) => {
- // 遍历天气映射表,找到匹配的图标
- for (const [key, icon] of Object.entries(weatherIconMap)) {
- if (weatherName.includes(key)) {
- return icon;
- }
- }
- // 如果没有匹配的,返回默认图标
- return weatherIconMap['默认'];
-};
-
-// 根据预警级别获取颜色
-const getAlertColor = (level) => {
- switch (level) {
- case '蓝色预警':
- return '#1E90FF';
- case '黄色预警':
- return '#FFA500';
- case '橙色预警':
- return '#FF4500';
- case '红色预警':
- return '#FF0000';
- default:
- return '#fff';
- }
-};
-
-// 天气预报卡片组件
-const WeatherCard = (props) => {
- const [weatherData, setWeatherData] = useState({
- text: '晴天',
- temp: '36.5',
- wind_class: '8级',
- })
- const [weatherIcon, setWeatherIcon] = useState()
- const [alert, setAlert] = useState([])
- const [currentAlertIndex, setCurrentAlertIndex] = useState(0)
- useEffect(() => {
- const fetchWeatherData = async () => {
- try {
- const response = await fetch('https://api.map.baidu.com/weather/v1/?district_id=130300&data_type=all&ak=dIqOi34IlTg5FkNck1vqoBpLhPAj36S1');
- const data = await response.json();
- setWeatherData(data.result.now);
- setWeatherIcon(getWeatherIcon(data.result.now.text));
- setAlert(Array.isArray(data.result.alerts) ? data.result.alerts : []);
- } catch (error) {
- console.error('获取天气数据失败:', error);
- }
- };
-
- fetchWeatherData();
- }, []);
-
- // 添加定时器实现预警信息自动切换
- useEffect(() => {
- if (!alert?.length || alert.length <= 1) return;
-
- const alertInterval = setInterval(() => {
- setCurrentAlertIndex((prevIndex) =>
- prevIndex === (alert?.length || 0) - 1 ? 0 : prevIndex + 1
- );
- }, 3000);
-
- return () => clearInterval(alertInterval);
- }, [alert?.length]);
-
-
- return (
-
-
-
-
-
-
-
-

-
-
温度:
-
{weatherData.temp}℃
-
-
-
-

-
-
风速:
-
{weatherData.wind_class}
-
-
-
-
-
- {alert?.length === 1 ? (
-
{alert[0].title}
- ) : alert?.length > 1 ? (
-
- {alert.map((item, index) => (
-
- {item.title}
-
- ))}
-
- ) : null}
-
-
-
- );
-};
-
-// 防汛状态组件
-const FloodControlStatus = () => {
- const floodData = [
- { company: '新益公司', status: '未处置', measures: '--' },
- { company: '二公司', status: '已处置', measures: '远离大树、电线杆、简易房等...' },
- { company: '六公司', status: '处置中', measures: '关闭门窗,加固模板、棚架、广告...' },
- { company: '一公司', status: '未处置', measures: '--' },
- { company: '三公司', status: '已处置', measures: '远离大树、电线杆、简易房等...' },
- { company: '五公司', status: '处置中', measures: '关闭门窗,加固模板、棚架、广告...' }
- ];
-
- const tableBodyRef = useRef(null);
-
- useEffect(() => {
- const tableBody = tableBodyRef.current;
- if (!tableBody) return;
-
- // 获取实际行高
- const firstRow = tableBody.querySelector('.table-row');
- const rowHeight = firstRow ? firstRow.offsetHeight : 30;
- const originalDataLength = floodData.length;
-
- let scrollTop = 0;
-
- const scrollInterval = setInterval(() => {
- scrollTop += 1;
-
- // 当滚动到原始数据末尾时,无缝重置到起始位置
- if (scrollTop >= originalDataLength * rowHeight) {
- scrollTop = 0;
- }
-
- tableBody.scrollTop = scrollTop;
- }, 50);
-
- return () => clearInterval(scrollInterval);
- }, [floodData]);
-
- return (
-
-
-
- 公司名称
- 处置状态
- 预防措施
-
-
- {[...floodData, ...floodData].map((item, index) => (
-
- {item.company}
-
- {item.status}
-
- {item.measures}
-
- ))}
-
-
-
- );
-};
-
-// 重大危险源组件
-const MajorHazards = () => {
- const [selectedHazard, setSelectedHazard] = useState('北区二号罐液位过低');
-
- const hazards = [
- { id: 1, name: '北区二号罐液位过低', level: '二级', type: '液位低' },
- // 可以添加更多危险源
- ];
-
- const tankStatusList = [
- { name: '东区二号罐', status: '正常' },
- { name: '北区二号罐', status: '液位低' },
- { name: '东区三号罐', status: '正常' },
- { name: '北区二号罐', status: '正常' }
- ];
-
- const alarmHandlingData = [
- { type: '温度待处置数/预警个数', value: '0/0' },
- { type: '压力待处置数/预警个数', value: '0/0' },
- { type: '液位待处置数/预警个数', value: '1/1' }
- ];
-
- return (
-
-
-
- {/* 告警中的危险源 */}
-
-
-

-
{selectedHazard}
-
-
-
- {/* 危险源统计 */}
-
-
-
二级重大危险源 (1个)
-
-
储罐数: 3
-
再用数: 3
-
停用数: 0
-
-
-
-
三级重大危险源 (2个)
-
-
储罐数: 10
-
再用数: 10
-
停用数: 0
-
-
-
-
- {/* 储罐状态和报警处置情况容器 */}
-
- {/* 储罐状态列表 */}
-
-
-
- {/* 原始数据 */}
- {tankStatusList.map((tank, index) => (
-
- {tank.name}
-
- {tank.status}
-
-
- ))}
- {/* 复制数据用于无缝滚动 */}
- {tankStatusList.map((tank, index) => (
-
- {tank.name}
-
- {tank.status}
-
-
- ))}
-
-
-
-
- {/* 报警处置情况 */}
-
-
报警处置情况
-
- {alarmHandlingData.map((item, index) => (
-
- {item.type}
- {item.value}
-
- ))}
-
-
-
-
-
- );
-};
-
-
-// 领域整改情况统计组件
-const DomainRectification = ({ chartRef }) => {
- const initChart = () => {
- if (chartRef.current) {
- const chart = echarts.init(chartRef.current);
- const option = {
- tooltip: {
- trigger: 'axis',
- backgroundColor: 'rgba(35, 53, 93, 0.8)',
- borderColor: 'rgba(66, 105, 143, 0.8)',
- borderWidth: 1,
- textStyle: {
- color: '#fff'
- },
- formatter: function (params) {
- let result = params[0].name + '
';
- params.forEach(item => {
- result += `${item.seriesName}: ${item.value}
`;
- });
- return result;
- }
- },
- legend: {
- data: ['整改隐患数', '未整改隐患数', '整改率'],
- textStyle: {
- color: '#fff'
- },
- right: 10,
- top: 0
- },
- grid: {
- left: '3%',
- right: '4%',
- bottom: '10%',
- top: '20%',
- containLabel: true
- },
- xAxis: {
- type: 'category',
- data: ['输电', '电力', '流机', '技术中心', '铁运', '煤炭', '新益公司'],
- axisLine: {
- lineStyle: {
- color: '#42698f'
- }
- },
- axisLabel: {
- color: '#fff',
- rotate: 45
- }
- },
- yAxis: [
- {
- type: 'value',
- name: '数量',
- min: 0,
- max: 100,
- axisLine: {
- lineStyle: {
- color: '#42698f'
- }
- },
- axisLabel: {
- color: '#fff'
- },
- splitLine: {
- lineStyle: {
- color: 'rgba(66, 105, 143, 0.3)'
- }
- }
- },
- {
- type: 'value',
- name: '整改率',
- min: 0,
- max: 100,
- axisLine: {
- lineStyle: {
- color: '#42698f'
- }
- },
- axisLabel: {
- color: '#fff',
- formatter: '{value}%'
- },
- splitLine: {
- show: false
- }
- }
- ],
- series: function() {
- const rectified = [35, 40, 90, 50, 60, 75, 45];
- const unrectified = [8, 12, 5, 15, 20, 10, 5];
-
- // Calculate rectification rate (rectified / total * 100, rounded to 2 decimals)
- const calculateRate = () => {
- return rectified.map((r, index) => {
- const total = r + unrectified[index];
- return total > 0 ? parseFloat(((r / total) * 100).toFixed(2)) : 0;
- });
- };
-
- return [
- {
- name: '整改隐患数',
- type: 'bar',
- stack: 'hidden',
- barWidth: 10,
- data: rectified,
- itemStyle: {
- color: '#faad14'
- }
- },
- {
- name: '未整改隐患数',
- type: 'bar',
- stack: 'hidden',
- barWidth: 10,
- data: unrectified,
- itemStyle: {
- color: '#ff4d4f'
- }
- },
- {
- name: '整改率',
- type: 'line',
- yAxisIndex: 1,
- data: calculateRate(),
- itemStyle: {
- color: '#52c41a'
- },
- lineStyle: {
- width: 2
- },
- symbolSize: 8
- }
- ];
- }()
- };
- chart.setOption(option);
-
- // 响应式调整
- window.addEventListener('resize', () => {
- chart.resize();
- });
-
- return chart;
- }
- return null;
- };
-
- useEffect(() => {
- const chart = initChart();
- return () => {
- if (chart) {
- chart.dispose();
- }
- };
- }, []);
-
- return (
-
- );
-};
-
-// 公司作业情况组件
-const CompanyOperationStatus = () => {
- const operationData = [
- { company: '秦港股份七公司', total: 16630, rectified: 15432, pending: 529, verified: 338 },
- { company: '秦港股份二公司', total: 12771, rectified: 11321, pending: 151, verified: 249 },
- { company: '秦港股份一公司', total: 12451, rectified: 11321, pending: 151, verified: 249 },
- { company: '秦港股份三公司', total: 5533, rectified: 64455, pending: 151, verified: 249 }
- ];
-
- const tableBodyRef = useRef(null);
-
- useEffect(() => {
- const tableBody = tableBodyRef.current;
- if (!tableBody) return;
-
- // 获取实际行高
- const firstRow = tableBody.querySelector('.table-row');
- const rowHeight = firstRow ? firstRow.offsetHeight : 30;
- const originalDataLength = operationData.length;
-
- let scrollTop = 0;
-
- const scrollInterval = setInterval(() => {
- scrollTop += 1;
-
- // 当滚动到原始数据末尾时,无缝重置到起始位置
- if (scrollTop >= originalDataLength * rowHeight) {
- scrollTop = 0;
- }
-
- tableBody.scrollTop = scrollTop;
- }, 50);
-
- return () => clearInterval(scrollInterval);
- }, [operationData]);
-
- return (
-
-
-
-
- 公司名称
- 发现隐患数
- 整改隐患数
- 待整改
- 待验收
-
-
- {[...operationData, ...operationData].map((item, index) => (
-
- {item.company}
- {item.total}
- {item.rectified}
- {item.pending}
- {item.verified}
-
- ))}
-
-
-
- );
-};
-
-
-// 主左侧面板组件
-const LeftPanel = (props) => {
- const chartRef = useRef(null);
-
- return (
-
-
-
-
-
-
-
- );
-};
-
-export default Connect([NS_BI], true)(LeftPanel);
diff --git a/src/pages/Container/Bi/components/search/index.js b/src/pages/Container/Bi/components/search/index.js
deleted file mode 100644
index afe7d63..0000000
--- a/src/pages/Container/Bi/components/search/index.js
+++ /dev/null
@@ -1,44 +0,0 @@
-
-import "./index.less";
-import img1 from "~/assets/images/public/bigScreen/topbg.png";
-import img2 from "~/assets/images/public/bigScreen/close.png";
-
-
-
-
-
-function SearchScreen() {
- return (
-
-
-
分公司列表
-
相关方列表
-
-

-
-
-
-
-
- );
-}
-
-export default SearchScreen;
diff --git a/src/pages/Container/Bi/components/topTitleArea.js b/src/pages/Container/Bi/components/topTitleArea.js
deleted file mode 100644
index b06fb7c..0000000
--- a/src/pages/Container/Bi/components/topTitleArea.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import { ArrowLeftOutlined } from "@ant-design/icons";
-import title from "../../../../assets/images/public/bigScreen/title.png";
-
-const TopTitleArea = () => {
- const handleGoBack = () => {
- // navigate(-1);
- };
-
- const handleGoToBackStage = () => {
- // navigate('/navPage');
- };
-
- return (
-
-
-
-
秦港股份安全监管平台
-
-

-
-
-
-
- );
-};
-
-export default TopTitleArea;
diff --git a/src/pages/Container/Bi/index.js b/src/pages/Container/Bi/index.js
index 94d6d0b..153bc35 100644
--- a/src/pages/Container/Bi/index.js
+++ b/src/pages/Container/Bi/index.js
@@ -1,20 +1,20 @@
-import backgroundimg from "../../../assets/images/public/bigScreen/backgroundimg.jpg";
-import "./index.less";
-import Header from "../Bi/components/Header/index";
-import Leftpanel from "~/pages/Container/Bi/components/LeftPanel/index";
-import Rightpanel from "~/pages/Container/Bi/components/rightPanel/index";
import Bottom from "~/pages/Container/Bi/components/Bottom/index";
-import Search from "~/pages/Container/Bi/components/search/index";
+import LeftPanel from "~/pages/Container/Bi/components/LeftPanel/index";
+import RightPanel from "~/pages/Container/Bi/components/RightPanel/index";
+import Search from "~/pages/Container/Bi/components/Search/index";
+import backgroundimg from "../../../assets/images/public/bigScreen/backgroundimg.jpg";
+import Header from "../Bi/components/Header/index";
+import "./index.less";
function BiScreen() {
return (
-