diff --git a/config/routes.js b/config/routes.js index eefca20..04455ee 100644 --- a/config/routes.js +++ b/config/routes.js @@ -36,6 +36,12 @@ export default [ name: 'atmospherePollutantLibrary', component: './business_envInformation/components/AtmospherePollutantLibrary', }, + // 环保监测管理 + { + path: '/topnavbar00/business/envmonitoring', + name: 'envInformation', + component: './business_envmonitoring/EnvMonitoring', + }, // 安全管理基础信息 { path: '/topnavbar00/business/basicinformation', diff --git a/src/assets/business_envmonitoring/alarm.svg b/src/assets/business_envmonitoring/alarm.svg new file mode 100644 index 0000000..e92c479 --- /dev/null +++ b/src/assets/business_envmonitoring/alarm.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/pages/business_envmonitoring/EnvMonitoring.js b/src/pages/business_envmonitoring/EnvMonitoring.js new file mode 100644 index 0000000..7fe722a --- /dev/null +++ b/src/pages/business_envmonitoring/EnvMonitoring.js @@ -0,0 +1,63 @@ +import React, { useState } from 'react'; +import { Card, Row, Col, Statistic, Progress, Button, Space } from 'antd'; +import styles from './EnvMonitoring.less'; +import EnvMonitoringOneMap from './components/EnvMonitoringOneMap'; //环保监测一张图 +import WastewaterMonitoring from './components/WastewaterMonitoring'; //废水监测管理 +import ExhaustMonitoring from './components/ExhaustMonitoring'; //废气监测管理 +import WasteMonitoring from './components/WasteMonitoring'; //废物监测管理 +const EnvMonitoring = () => { + const [activeModule, setActiveModule] = useState('1'); + + const handleModuleClick = (module) => { + setActiveModule(module) + } + + + const renderModule = () => { + switch (activeModule) { + case '1': + return ; + case '2': + return ; + case '3': + return ; + case '4': + return ; + default: + return ; + } + }; + + + return ( +
+
+ + + + +
+
+ {renderModule()} +
+
+ ); +}; + +export default EnvMonitoring; diff --git a/src/pages/business_envmonitoring/EnvMonitoring.less b/src/pages/business_envmonitoring/EnvMonitoring.less new file mode 100644 index 0000000..102e9ab --- /dev/null +++ b/src/pages/business_envmonitoring/EnvMonitoring.less @@ -0,0 +1,69 @@ +.container { + background-color: transparent; + width: 100%; + height: 89vh; + overflow: hidden; + display: flex; + flex-direction: column; + + .TopButton { + background-color: white; + width: 100%; + padding: 8px 15px 5px; + display: flex; + gap: 24px; + // margin-left: 6px; + + .TopButtonItem { + background-color: #FFFFFF !important; + color: #999999 !important; + font-family: 'PingFang SC', sans-serif !important; + font-weight: 500 !important; + font-size: 14px !important; + line-height: 100% !important; + border-radius: 8px !important; + padding: 4px 16px !important; + height: auto !important; + border: none !important; + box-shadow: none !important; + position: relative !important; + display: flex !important; + flex-direction: column !important; + align-items: center !important; + gap: 5px !important; + transition: all 0.3s ease !important; + + &:hover { + color: #999999 !important; + border: none !important; + } + + &:focus { + color: #999999 !important; + border: none !important; + } + + &.active { + background: linear-gradient(98.03deg, #00E49C 0.68%, #00D2D2 98.3%) !important; + box-shadow: 0px 2px 2px 0px #AEEDDE !important; + color: #FFFFFF !important; + + &::after { + content: ''; + width: 28px; + height: 5px; + background-color: #FFFFFF; + border-radius: 6px; + opacity: 1; + } + } + } + } + + .content { + // ======== 内容区域样式 ======== + flex: 1; // ======== 占据剩余空间 ======== + overflow-y: auto; // ======== 允许垂直滚动 ======== + padding: 0; // ======== 无内边距 ======== + } +} \ No newline at end of file diff --git a/src/pages/business_envmonitoring/components/EnvMonitoringOneMap.js b/src/pages/business_envmonitoring/components/EnvMonitoringOneMap.js new file mode 100644 index 0000000..99be5dd --- /dev/null +++ b/src/pages/business_envmonitoring/components/EnvMonitoringOneMap.js @@ -0,0 +1,13 @@ +import React from 'react'; +import styles from './EnvMonitoringOneMap.less'; + +const EnvMonitoringOneMap = () => { + return ( +
+ 开发中 +
+ ); +}; + +export default EnvMonitoringOneMap; + diff --git a/src/pages/business_envmonitoring/components/EnvMonitoringOneMap.less b/src/pages/business_envmonitoring/components/EnvMonitoringOneMap.less new file mode 100644 index 0000000..6d0fee9 --- /dev/null +++ b/src/pages/business_envmonitoring/components/EnvMonitoringOneMap.less @@ -0,0 +1,41 @@ +.container { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + background-color: #fff; + border-radius: 4px; + padding: 20px; + + .developingBox { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 60px 80px; + background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); + border-radius: 12px; + box-shadow: 0 10px 30px rgba(240, 147, 251, 0.3); + + .developingText { + font-size: 32px; + font-weight: 600; + color: #ffffff; + letter-spacing: 4px; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); + animation: pulse 2s ease-in-out infinite; + } + } +} + +@keyframes pulse { + 0%, 100% { + opacity: 1; + transform: scale(1); + } + 50% { + opacity: 0.8; + transform: scale(1.05); + } +} diff --git a/src/pages/business_envmonitoring/components/ExhaustMonitoring.js b/src/pages/business_envmonitoring/components/ExhaustMonitoring.js new file mode 100644 index 0000000..96c7f17 --- /dev/null +++ b/src/pages/business_envmonitoring/components/ExhaustMonitoring.js @@ -0,0 +1,66 @@ +import React, { useState } from 'react'; +import { Tabs, Button } from 'antd'; +import styles from './ExhaustMonitoring.less'; +import { SettingOutlined } from '@ant-design/icons'; +// 导入子页面组件 +import ExhaustEmissionStandard from './secondary_menu/ExhaustEmissionStandard'; +import AlarmInformation from './secondary_menu/AlarmInformation'; +import AbnormalAlarmInformation from './secondary_menu/AbnormalAlarmInformation'; + +const ExhaustMonitoring = () => { + const [activeTab, setActiveTab] = useState('exhaust-emission-standard'); + + // 标签页配置 + const tabItems = [ + { + key: 'exhaust-emission-standard', + label: '废气排放达标情况管理', + children: + }, + { + key: 'abnormal-alarm-information', + label: '异常报警信息管理', + children: + }, + { + key: 'alarm-information', + label: '告警信息管理', + children: + } + ]; + + // 标签页切换处理 + const handleTabChange = (key) => { + setActiveTab(key); + }; + + return ( +
+ } + className={styles.settingButton} + onClick={() => {/* 你的操作 */ }}> + 自动报警设置 + + } + /> +
+ ); +}; + +export default ExhaustMonitoring; + diff --git a/src/pages/business_envmonitoring/components/ExhaustMonitoring.less b/src/pages/business_envmonitoring/components/ExhaustMonitoring.less new file mode 100644 index 0000000..8f80523 --- /dev/null +++ b/src/pages/business_envmonitoring/components/ExhaustMonitoring.less @@ -0,0 +1,132 @@ +.container { + width: 100%; + height: 100%; + padding: 10px 0; + // background-color: #f5f5f5; + + .tabs { + height: 100%; + background-color: transparent; + border-radius: 8px; + // box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + + :global(.ant-tabs-nav) { + margin: 0; + padding: 0 0px; + background-color: transparent; + border-bottom: none; + } + + :global(.ant-tabs-tab) { + padding: 16px 24px !important; + font-size: 14px !important; + font-weight: 400 !important; + color: #AFAFAF !important; + background: transparent !important; + border: none !important; + position: relative; + + &:hover { + color: #AFAFAF !important; + background-color: transparent !important; + } + + &.ant-tabs-tab-active { + color: #009D6F !important; + background-color: #fff !important; + border-bottom: none !important; + font-weight: 700; + + } + } + + // 额外的全局样式覆盖，确保优先级足够高 + :global(.ant-tabs-tab.ant-tabs-tab-active) { + color: #009D6F !important; + background-color: #fff !important; + border-bottom: none !important; + } + + // 更强的选择器优先级 + :global(.ant-tabs .ant-tabs-tab.ant-tabs-tab-active) { + color: #009D6F !important; + background-color: #fff !important; + border-bottom: none !important; + } + + // 针对可能的嵌套结构 + :global(.ant-tabs-nav .ant-tabs-tab.ant-tabs-tab-active) { + color: #009D6F !important; + background-color: #fff !important; + border-bottom: none !important; + } + + // // 覆盖 Ant Design 5.x 的高优先级样式 + // :global(.ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) { + // color: #009D6F !important; + // text-shadow: none !important; + // } + + // 使用更高优先级的选择器 + :global(.ant-tabs.ant-tabs-top .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) { + color: #009D6F !important; + text-shadow: none !important; + } + + // 针对 CSS 模块的覆盖 + :global(.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) { + color: #009D6F !important; + text-shadow: none !important; + } + + // 最高优先级覆盖 + :global(.ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) { + color: #009D6F !important; + text-shadow: none !important; + } + + // 覆盖Ant Design的默认下划线 + :global(.ant-tabs-ink-bar) { + background: none !important; + + &::after { + content: ''; + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%) rotate(180deg); + width: 38.36132812500014px; + height: 3.3613271713256965px; + background-color: #009D6F; + opacity: 1; + border-radius: 2px; + z-index: 1; + } + } + + :global(.ant-tabs-content-holder) { + height: calc(100% - 60px); + // padding: 20px; + + .ant-tabs-content { + height: 100%; + + .ant-tabs-tabpane { + height: 100%; + } + } + } + } + + .settingButton { + border-color: #d9d9d9; + color: #333; + height: 32px; + border-radius: 4px; + + &:hover { + border-color: #40a9ff; + color: #40a9ff; + } + } +} \ No newline at end of file diff --git a/src/pages/business_envmonitoring/components/WasteMonitoring.js b/src/pages/business_envmonitoring/components/WasteMonitoring.js new file mode 100644 index 0000000..f53ce40 --- /dev/null +++ b/src/pages/business_envmonitoring/components/WasteMonitoring.js @@ -0,0 +1,13 @@ +import React from 'react'; +import styles from './WasteMonitoring.less'; + +const WasteMonitoring = () => { + return ( +
+ 开发中 +
+ ); +}; + +export default WasteMonitoring; + diff --git a/src/pages/business_envmonitoring/components/WasteMonitoring.less b/src/pages/business_envmonitoring/components/WasteMonitoring.less new file mode 100644 index 0000000..6d0fee9 --- /dev/null +++ b/src/pages/business_envmonitoring/components/WasteMonitoring.less @@ -0,0 +1,41 @@ +.container { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + background-color: #fff; + border-radius: 4px; + padding: 20px; + + .developingBox { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 60px 80px; + background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); + border-radius: 12px; + box-shadow: 0 10px 30px rgba(240, 147, 251, 0.3); + + .developingText { + font-size: 32px; + font-weight: 600; + color: #ffffff; + letter-spacing: 4px; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); + animation: pulse 2s ease-in-out infinite; + } + } +} + +@keyframes pulse { + 0%, 100% { + opacity: 1; + transform: scale(1); + } + 50% { + opacity: 0.8; + transform: scale(1.05); + } +} diff --git a/src/pages/business_envmonitoring/components/WastewaterMonitoring.js b/src/pages/business_envmonitoring/components/WastewaterMonitoring.js new file mode 100644 index 0000000..bd2f6dd --- /dev/null +++ b/src/pages/business_envmonitoring/components/WastewaterMonitoring.js @@ -0,0 +1,349 @@ +import React, { useEffect, useRef, useState } from 'react'; +import { Card, Select, Button, Table, Tag, Input, Form, Row, Col, Pagination, Space } from 'antd'; +import { EyeOutlined, SettingOutlined, PlusOutlined } from '@ant-design/icons'; +import * as echarts from 'echarts'; +import styles from './WastewaterMonitoring.less'; +import viewIcon from '@/assets/business_envinformation/viewicon.svg'; +const pollutantOptions = [ + { value: '全部', label: '全部污染物' }, + { value: 'COD', label: 'COD' }, + { value: '氨氮', label: '氨氮' }, +]; +const monitorPointOptions = [ + { value: '全部', label: '全部监测点' }, + { value: '点1', label: '点1' }, + { value: '点2', label: '点2' }, +]; +const dateOptions = [ + { value: '本月', label: '本月' }, + { value: '本周', label: '本周' }, + { value: '今日', label: '今日' }, +]; +const statData = [ + { w: 'COD', s: '山顶点', v: '490mg/L', d: '2025-09-11', st: '正常' }, + { w: 'COD', s: '山顶点', v: '490mg/L', d: '2025-09-11', st: '正常' }, + { w: 'COD', s: '山顶点', v: '490mg/L', d: '2025-09-11', st: '正常' }, + { w: 'COD', s: '山顶点', v: '490mg/L', d: '2025-09-11', st: '正常' }, + { w: 'COD', s: '山顶点', v: '490mg/L', d: '2025-09-11', st: '超标' }, + { w: 'COD', s: '山顶点', v: '490mg/L', d: '2025-09-11', st: '正常' }, + { w: 'COD', s: '山顶点', v: '490mg/L', d: '2025-09-11', st: '正常' }, + { w: 'COD', s: '山顶点', v: '490mg/L', d: '2025-09-11', st: '报警' }, + { w: 'COD', s: '山顶点', v: '490mg/L', d: '2025-09-11', st: '正常' }, + { w: 'COD', s: '山顶点', v: '490mg/L', d: '2025-09-11', st: '超标' }, +]; +const alarmTableColumns = [ + { title: '序号', dataIndex: 'index', width: 60, render: (_, __, i) => i + 1 }, + { title: '报警时间', dataIndex: 'time' }, + { title: '监测站点', dataIndex: 'point' }, + { title: '污染物名称', dataIndex: 'name' }, + { title: '超标情况(%)', dataIndex: 'percent' }, + { title: '负责人', dataIndex: 'person' }, + { title: '报警短信', dataIndex: 'sms', render: v => v === '已发送' ? 已发送 : 未发送 }, + { title: '处理情况', dataIndex: 'status', render: v => v === '已处理' ? 已处理 : v === '未处理' ? 未处理 : 处理中 }, + { + title: '操作', dataIndex: 'action', align: 'center', render: (_, record) => ( +
+ 查看 +
+ ), + }, +]; +const alarmTableData = [ + { time: '2025-08-27 07:12', point: 'xxxxx', name: 'hto', percent: 26, person: '负责人', sms: '已发送', status: '已处理' }, + { time: '2025-08-27 07:12', point: 'xxxxx', name: 'dfadf', percent: 58, person: '负责人', sms: '未发送', status: '未处理' }, + { time: '2025-08-27 07:12', point: 'xxxxx', name: 'dfadf', percent: 52, person: '王华俊', sms: '已发送', status: '已处理' }, + { time: '2025-08-27 07:12', point: 'xxxxx', name: 'dfadf', percent: 43, person: '赵荣堂', sms: '已发送', status: '已处理' }, + { time: '2025-08-27 07:12', point: 'xxxxx', name: 'dfadf', percent: 43, person: '赵荣堂', sms: '已发送', status: '已处理' }, + { time: '2025-08-27 07:12', point: 'xxxxx', name: 'dfadf', percent: 43, person: '赵荣堂', sms: '已发送', status: '已处理' }, + { time: '2025-08-27 07:12', point: 'xxxxx', name: 'dfadf', percent: 43, person: '赵荣堂', sms: '已发送', status: '已处理' }, +]; + +const OnlineMonitoring = () => { + const chartRef = useRef(null); + const [monitorPoint, setMonitorPoint] = useState('全部'); + const [pollutant, setPollutant] = useState('全部'); + const [dateRange, setDateRange] = useState('本月'); + const [pagination, setPagination] = useState({ + current: 1, + pageSize: 5, + total: 0, + }); + const [alarmPage, setAlarmPage] = useState(1); + const ALARM_PAGE_SIZE = 7; + const ALARM_TOTAL = 85; // 真实总数 + + useEffect(() => { + if (chartRef.current) { + const chart = echarts.init(chartRef.current); + chart.setOption({ + grid: { left: 40, right: 20, top: 20, bottom: 40 }, + xAxis: { + type: 'category', + data: ['05-01', '05-05', '05-09', '05-13', '05-17', '05-21', '05-25', '05-29', '05-31'], + boundaryGap: false, + axisLine: { show: false }, + axisTick: { show: false }, + axisLabel: { color: '#A3ACB7', fontSize: 13, margin: 16 }, + splitLine: { show: false }, // 竖线不显示 + }, + yAxis: { + type: 'value', + min: 0, + max: 900, + splitNumber: 9, + axisLine: { show: false }, + axisTick: { show: false }, + axisLabel: { color: '#A3ACB7', fontSize: 13, margin: 16 }, + splitLine: { show: true, lineStyle: { color: '#E9F0F5', type: 'dashed' } }, // 横线为虚线 + }, + series: [{ + data: [400, 500, 700, 800, 600, 700, 500, 400, 450], + type: 'line', + smooth: true, + symbol: 'none', + lineStyle: { color: '#00C48F', width: 2 }, + areaStyle: { + color: { + type: 'linear', + x: 0, y: 0, x2: 0, y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(0,196,143,0.15)' }, + { offset: 1, color: 'rgba(0,196,143,0.00)' } + ] + } + }, + }], + tooltip: { + trigger: 'axis', + backgroundColor: '#fff', + borderColor: '#E9F0F5', + borderWidth: 1, + textStyle: { color: '#222', fontSize: 13 }, + axisPointer: { type: 'line', lineStyle: { color: '#00C48F', width: 1 } }, + }, + markLine: { + symbol: 'none', + data: [ + { + yAxis: 700, + lineStyle: { color: '#FF8A00', type: 'dashed', width: 2 }, + label: { + show: true, + position: 'start', + color: '#fff', + backgroundColor: '#FF8A00', + borderRadius: 4, + padding: [2, 8], + fontSize: 13, + fontWeight: 500, + formatter: '700', + distance: 10 + } + }, + { + yAxis: 700, + lineStyle: { color: 'transparent' }, + label: { + show: true, + position: [0, 18], + color: '#FF8A00', + backgroundColor: 'transparent', + fontSize: 12, + formatter: '严重超标', + distance: 0 + } + }, + { + yAxis: 500, + lineStyle: { color: '#FFB800', type: 'dashed', width: 2 }, + label: { + show: true, + position: 'start', + color: '#fff', + backgroundColor: '#FFB800', + borderRadius: 4, + padding: [2, 8], + fontSize: 13, + fontWeight: 500, + formatter: '500', + distance: 10 + } + }, + { + yAxis: 500, + lineStyle: { color: 'transparent' }, + label: { + show: true, + position: [0, 18], + color: '#FFB800', + backgroundColor: 'transparent', + fontSize: 12, + formatter: '报警线', + distance: 0 + } + } + ] + }, + }); + } + }, [monitorPoint, pollutant, dateRange]); + + return ( +
+
+ {/* 左侧主区 */} +
+
+
+
+
+ 污染物排放趋势 +
+
+ + + + +
+
+
+ `共 ${total} 条`, + onChange: (page) => setAlarmPage(page), + showSizeChanger: false, + showQuickJumper: true, + position: ['bottomRight'], + }} + rowKey={(_, i) => i + (alarmPage - 1) * ALARM_PAGE_SIZE} + scroll={{ x: 'max-content' }} + bordered={false} + className={styles.alarmTable} + tableLayout="fixed" + /> + + + +
+
+
+
+
+ 污染物排放统计 +
+ +
+
+
`共 10 条`, + onChange: (page) => setAlarmPage(page), + showSizeChanger: false, + showQuickJumper: true, + position: ['bottomRight'], + }} + rowKey={(r, i) => i + (alarmPage - 1) * ALARM_PAGE_SIZE} + scroll={{ x: 'max-content' }} + bordered={false} + tableLayout="fixed" + rowClassName={(_, idx) => idx % 2 === 0 ? '' : 'table-row-alt'} + onRow={() => ({ style: { height: 20 } })} + components={{ + body: { + wrapper: (props) => { + // 过滤掉第一个tr + const { children, ...rest } = props; + return ( + + {React.Children.toArray(children).slice(1)} + + ); + } + } + }} + /> + + + {/* 短信区块 */} +
+
+
+
+
+ 报警短信 +
+
+ + +
+
+
+
+ 收 件 人 + +
+
+ 短信内容 +
+ +
+
+ +
+
+ + + + ); +}; + +export default OnlineMonitoring; diff --git a/src/pages/business_envmonitoring/components/WastewaterMonitoring.less b/src/pages/business_envmonitoring/components/WastewaterMonitoring.less new file mode 100644 index 0000000..2094fbf --- /dev/null +++ b/src/pages/business_envmonitoring/components/WastewaterMonitoring.less @@ -0,0 +1,1408 @@ +// 报警短信区块图片还原样式 +.smsCard { + background: #fff; + border-radius: 0; + box-shadow: none; + width: 100%; + padding: 0 0 18px 0; + margin-top: 10px; +} + +.smsHeader { + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px 18px 0 18px; +} + +.smsTitle { + font-weight: 500; + font-size: 18px; + display: flex; + align-items: center; + color: #222; +} + +.smsTitleBar { + width: 4px; + height: 18px; + background: #009D6F; + border-radius: 2px; + margin-right: 8px; +} + +.smsHeaderBtns { + display: flex; + align-items: center; + gap: 16px; +} + +.smsTplBtn { + background: #F5F5FA !important; + color: #333 !important; + border: none !important; + border-radius: 4px !important; + font-size: 15px !important; + padding: 0 18px !important; + height: 36px !important; + font-weight: 500; +} + +.smsSendBtn { + background: #00D48A !important; + color: #fff !important; + border: none !important; + border-radius: 4px !important; + font-size: 16px !important; + padding: 0 24px !important; + height: 36px !important; + font-weight: 500; +} + +.smsForm { + padding: 0 32px 0 32px; + margin-top: 8px; +} + +.smsFormItem { + margin-bottom: 18px !important; +} + +.smsLabel { + font-size: 15px; + color: #222; + font-weight: 400; + letter-spacing: 2px; +} + +.smsInput { + border-radius: 4px !important; + height: 36px !important; + font-size: 15px !important; +} + +.smsTextarea { + border-radius: 4px !important; + font-size: 15px !important; + min-height: 80px !important; + resize: none; +} + +.smsTplBtnsWrap { + margin-top: 8px; + display: flex; + gap: 8px; +} + +.smsTplMiniBtn { + background: #F5F5FA !important; + color: #999 !important; + border: none !important; + border-radius: 4px !important; + font-size: 13px !important; + padding: 0 12px !important; + height: 28px !important; + font-weight: 400; +} + +.statTable tbody tr td { + position: relative; + // height: 36px; + // line-height: 36px; + vertical-align: middle; +} + +.statTable tbody tr td:first-child::before { + content: ''; + display: inline-block; + width: 2px; + height: 18px; + background: #7EDAAF; + // border-radius: 2px; + margin-right: 8px; + vertical-align: middle; + position: relative; + top: 0; +} + +.statTable tbody tr td { + padding-left: 0; +} + +.statTable thead tr th { + padding-left: 0; +} + +.statTable tbody tr td { + text-align: left; +} + +.statTable thead tr th { + text-align: left; +} + +.statTable tbody tr td:last-child { + min-width: 110px; +} + +.statFooter { + justify-content: center; + gap: 32px; +} + +.statFooterBtn { + margin-right: auto; +} + +.statPagination { + margin-left: auto; +} + +// 污染物排放统计区块图片还原样式 +.statCard { + background: #fff; + border-radius: 0; + box-shadow: none; + width: 100%; + padding: 0; + display: flex; + flex-direction: column; +} + +.statHeader { + display: flex; + align-items: center; + justify-content: space-between; + padding: 18px 18px 0 18px; +} + +.statAddBtn { + background: #00D48A !important; + color: #fff !important; + border: none !important; + border-radius: 4px !important; + font-size: 16px !important; + height: 36px !important; + font-weight: normal; +} + +.statTableWrap { + padding: 0 18px 0 18px; + flex: 1; + overflow-x: hidden; +} + +.statTable { + width: 100%; + border-collapse: separate; + border-spacing: 0; + font-size: 15px; + margin-top: 12px; +} + +.statTable thead tr th { + background: rgba(219, 232, 230, 0.59) !important; + font-weight: normal; + font-size: 14px; + color: #666666 !important; + padding: 10px 0; + border-bottom: 1px solid #F0F0F0; + text-align: left; + border-radius: 0 !important; +} + +.statTable tbody tr td { + background: #fff; + color: #333; + font-size: 14px; + padding: 10px 0; + border-bottom: 1px solid #F0F0F0; + text-align: left; +} + +.statTable tbody tr:nth-child(even) td { + background: #FAFAFC; +} + +.statTagNormal { + display: inline-block; + background: #F5F5F5; + color: #999; + border-radius: 4px; + font-size: 13px; + padding: 2px 12px; + border: 1px solid #E5E5E5; +} + +.statTagWarn { + display: inline-block; + background: #FFF9F2; + color: #FFB800; + border-radius: 4px; + font-size: 13px; + padding: 2px 12px; + border: 1px solid #FFE1B7; +} + +.statTagDanger { + display: inline-block; + background: #FFF6F6; + color: #FF4D4F; + border-radius: 4px; + font-size: 13px; + padding: 2px 12px; + border: 1px solid #FFD6D6; +} + +.statFooter { + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px 18px 10px 18px; + border-top: 1px solid #F0F0F0; + margin-top: 0; +} + +.statFooterBtn { + background: #ffffff !important; + color: #333 !important; + border: 1px solid #D7D7D7 !important; + border-radius: 4px !important; + font-size: 15px !important; + padding: 0 10px !important; + height: 36px !important; + font-weight: normal; + display: flex; + align-items: center; +} + +.statTotal { + font-size: 15px; + color: #666; +} + +.statPagination { + display: flex; + align-items: center; + gap: 4px; +} + +.statPageNavBtn { + border: 1px solid #DFE4F6 !important; + border-radius: 4px !important; + background: #fff !important; + color: #2E4CD4 !important; + width: 32px; + height: 32px; + font-size: 16px; + padding: 0; + display: flex; + align-items: center; + justify-content: center; +} + +.statPageInput { + width: 36px; + height: 32px; + border: 1px solid #2E4CD4; + border-radius: 4px; + text-align: center; + font-size: 15px; + color: #2E4CD4; + outline: none; + margin: 0 2px; +} + +// 自动生成的less样式（用于配合去除行内样式后的类名结构） +.pageMainRow { + display: flex; + height: calc(100vh - 32px); + gap: 10px; + width: 100%; + max-width: 100vw; + box-sizing: border-box; +} + +.pageMainColLeft { + flex: 1 1 0; + min-width: 0; + display: flex; + flex-direction: column; + gap: 10px; + box-sizing: border-box; +} + +.pageMainColRight { + width: 370px; + min-width: 320px; + max-width: 400px; + flex-shrink: 0; + display: flex; + flex-direction: column; + gap: 10px; + box-sizing: border-box; +} + +.trendCard { + background: #fff; + border-radius: 0; + box-shadow: none; + width: 100%; + height: 370px; + display: flex; + flex-direction: column; + justify-content: flex-start; +} + +.trendHeader { + padding: 18px 0 0 18px; + margin-bottom: 0; + display: flex; + align-items: center; + justify-content: space-between; +} + +.trendTitle { + font-weight: 700; + font-size: 16px; + display: flex; + align-items: center; + color: #333; +} + +.trendTitleBar { + width: 4px; + height: 18px; + background: #009D6F; + margin-right: 8px; +} + +.trendSelects { + display: flex; + align-items: center; + gap: 16px; + margin-right: 24px; +} + +.trendSelect { + width: 140px; + border-radius: 4px; +} + +.trendChart { + height: 320px; + margin-top: 8px; + margin-left: 8px; + margin-right: 8px; +} + +.alarmTableCard { + background: #fff; + border-radius: 0; + box-shadow: none; + width: 100%; + flex: 1; + display: flex; + flex-direction: column; + padding: 0; +} + +.alarmTableHeader { + display: flex; + align-items: center; + justify-content: space-between; + padding: 18px 18px 0 18px; + margin-bottom: 10px; +} + +.alarmTableTitle { + font-weight: 700; + font-size: 16px; + display: flex; + align-items: center; + color: #333; +} + +.alarmTableTitleBar { + width: 4px; + height: 18px; + background: #009D6F; + border-radius: 2px; + margin-right: 8px; +} + +.alarmTableSelects { + display: flex; + align-items: center; + gap: 8px; +} + +.alarmTableSelect { + width: 140px; + border-radius: 4px; + font-size: 14px; +} + +.alarmTableAddBtn { + background: #ddd !important; + color: #fff !important; + border: none !important; + border-radius: 4px !important; + font-size: 20px !important; + font-weight: 700; + padding: 0 10px !important; +} + +.alarmTableWrap { + padding: 0 18px 0 18px; + flex: 1; +} + +.alarmTable { + margin-top: 0; + background: #fff; + font-size: 15px; + line-height: 44px; +} + +.alarmTableTotal { + font-size: 15px; + color: #666; +} + +.alarmTablePageBtn { + font-weight: 600; + color: #2E4CD4; + // border: 1px solid #DFE4F6; + // border-radius: 4px; + padding: 0 10px; + background: #fff; +} + +.alarmTablePageNavBtn { + border: 1px solid #DFE4F6 !important; + border-radius: 4px !important; + background: #fff !important; + color: #2E4CD4 !important; + // margin: 0 4px !important; +} + +.Ocontainer { + padding: 10px 0px; + height: 100%; + display: flex; + flex-direction: column; + + .OcontainerTop { + display: flex; + + height: 50%; + margin-bottom: 5px; + + .OcontainerTopLeft { + width: 72%; + height: 100%; + // background-color: pink; + margin-right: 10px; + // display: flex; + + .OcontainerTopLeftTop { + width: 100%; + height: 35%; + display: flex; + gap: 12px; + + .alarmO { + flex: 1; + height: 100%; + background-color: #F4F7FF; + border: 1px solid #AED3FF; + border-bottom: 0px solid #AED3FF; + border-radius: 4px; + box-shadow: 0px 2px 31px 0px #5382FE33 inset; + display: flex; + + .alarmOLeft { + width: 35%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + } + + .alarmORight { + flex: 1; + width: 35%; + height: 100%; + display: flex; + flex-direction: column; + margin-left: 2px; + gap: 18px; + + font-family: PingFang SC; + font-weight: 400; + font-style: Regular; + font-size: 12px; + line-height: 100%; + letter-spacing: 0%; + color: #333333; + + .alarmORightText1 { + margin-top: 15px; + } + + + .alarmORightText2 { + font-weight: 700; + font-size: 16px; + } + + .alarmORightText3 { + display: flex; + gap: 22px; + } + + } + + + + } + + .alarmTw { + flex: 1; + height: 100%; + background-color: #FFF5f4; + border: 1px solid #FFC5BC; + border-bottom: 0px solid #FFC5BC; + border-radius: 4px; + box-shadow: 0px 2px 31px 0px #FE5F4C33 inset; + display: flex; + + .alarmTwLeft { + width: 35%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + } + + .alarmTwRight { + flex: 1; + width: 35%; + height: 100%; + display: flex; + flex-direction: column; + margin-left: 2px; + gap: 18px; + + font-family: PingFang SC; + font-weight: 400; + font-style: Regular; + font-size: 12px; + line-height: 100%; + letter-spacing: 0%; + color: #333333; + + .alarmTwRightText1 { + margin-top: 15px; + } + + .alarmTwRightText2 { + font-weight: 700; + font-size: 16px; + } + + .alarmTwRightText3 { + display: flex; + gap: 22px; + } + } + } + + .alarmTh { + flex: 1; + height: 100%; + background-color: #FFF7F2; + border: 1px solid #FFD9B2; + border-bottom: 0px solid #FFD9B2; + border-radius: 4px; + box-shadow: 0px 2px 31px 0px #FD883C33 inset; + display: flex; + + .alarmThLeft { + width: 35%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + } + + .alarmThRight { + flex: 1; + width: 35%; + height: 100%; + display: flex; + flex-direction: column; + margin-left: 2px; + gap: 18px; + + font-family: PingFang SC; + font-weight: 400; + font-style: Regular; + font-size: 12px; + line-height: 100%; + letter-spacing: 0%; + color: #333333; + + .alarmThRightText1 { + margin-top: 15px; + } + + .alarmThRightText2 { + font-weight: 700; + font-size: 16px; + } + + .alarmThRightText3 { + display: flex; + gap: 22px; + } + } + } + + .alarmF { + flex: 1; + height: 100%; + background-color: #EFF9FF; + border: 1px solid #89E1FF; + border-bottom: 0px solid #89E1FF; + border-radius: 4px; + box-shadow: 0px 2px 31px 0px #22A4FD33 inset; + display: flex; + + .alarmFLeft { + width: 35%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + } + + .alarmFRight { + flex: 1; + width: 35%; + height: 100%; + display: flex; + flex-direction: column; + margin-left: 2px; + gap: 18px; + + font-family: PingFang SC; + font-weight: 400; + font-style: Regular; + font-size: 12px; + line-height: 100%; + letter-spacing: 0%; + color: #333333; + + .alarmFRightText1 { + margin-top: 15px; + } + + .alarmFRightText2 { + font-weight: 700; + font-size: 16px; + } + + .alarmFRightText3 { + display: flex; + gap: 22px; + } + } + } + } + + .OcontainerTopLeftBottom { + margin-top: 12px; + background-color: #fff; + width: 100%; + height: 60%; + + .OcontainerTopLeftBottomTitle { + display: flex; + justify-content: space-between; + align-items: center; + // padding: 8px 15px; + padding: 8px 15px 0px 15px; + + .titleLeft { + display: flex; + align-items: center; + gap: 8px; + font-family: PingFang SC; + font-weight: 500; + font-style: Medium; + font-size: 14px; + line-height: 100%; + letter-spacing: 0%; + + + .titleIcon { + width: 3px; + height: 16px; + background-color: #2E4CD4; + } + } + + .titleRight { + display: flex; + align-items: center; + gap: 8px; + + font-family: PingFang SC; + font-style: Medium; + font-size: 13px; + line-height: 100%; + letter-spacing: 0%; + + + .selectBox { + padding: 4px 8px; + border: 1px solid #d9d9d9; + border-radius: 4px; + background-color: #fff; + font-size: 12px; + color: #333; + outline: none; + + &:focus { + border-color: #2E4CD4; + } + } + } + } + + .OcontainerTopLeftBottomChart { + flex: 1; + width: 100%; + height: 75%; + } + } + } + + .OcontainerTopRight { + flex: 1; + height: calc(100% - 3.3px); + background-color: #fff; + background-image: url('@/assets/safe_majorHazard/online_monitoring/backTopRight.png'); + background-size: 100% auto; + display: flex; + flex-direction: column; + overflow-y: auto; + + .realTimeDataHeader { + display: flex; + justify-content: space-between; + align-items: center; + padding: 8px 15px; + margin-bottom: 10px; + + .titleLeft { + display: flex; + align-items: center; + gap: 8px; + font-family: PingFang SC; + font-weight: 500; + font-style: Medium; + font-size: 14px; + line-height: 100%; + letter-spacing: 0%; + + .titleIcon { + width: 3px; + height: 16px; + background-color: #2E4CD4; + } + } + + .totalCount { + font-family: PingFang SC; + font-weight: 400; + font-size: 13px; + color: #333333; + } + } + + .dataItem { + height: 23%; + flex-shrink: 0; + border: 1px solid #89E1FF; + border-radius: 2px; + margin: 0 15px; + margin-bottom: 6px; + display: flex; + align-items: center; + justify-content: center; + font-family: PingFang SC; + font-size: 14px; + // color: #666; + background-color: #EFF9FF; + + &:last-child { + // margin-bottom: 1px; + } + } + + .dataItem1 { + height: 25%; + flex-shrink: 0; + border: 1px solid #89E1FF; + border-radius: 4px; + margin: 0 15px; + margin-bottom: 6px; + display: flex; + align-items: center; + padding: 0px 15px; + background-color: #EFF9FF; + + .dataItemLeft { + width: 65%; + display: flex; + flex-direction: column; + gap: 8px; + + .areaName { + + font-family: PingFang SC; + font-weight: 400; + font-size: 13px; + color: #333333; + line-height: 2.2; + } + + .rValue { + font-family: PingFang SC; + font-weight: 400; + font-size: 14px; + color: #666666; + line-height: 0.2; + } + + .codeNumber { + font-family: PingFang SC; + font-weight: 400; + font-size: 12px; + color: #666666; + } + } + + .dataItemRight { + width: 35%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + + .circleContainer { + position: relative; + height: 80%; + aspect-ratio: 1; // 强制宽高比1:1 + + .outerCircle { + + width: 100%; + height: 100%; + background-color: rgba(51, 176, 253, 0.3); + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + + .innerCircle { + width: 70%; + height: 70%; + background-color: rgba(4, 128, 251, 0.8); + border-radius: 50%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + .levelText { + font-family: PingFang SC; + font-weight: 500; + font-size: 11px; + color: #FFFFFF; + line-height: 1.4; + margin-top: -4px; + } + + .riskText { + font-family: PingFang SC; + font-weight: 300; + font-size: 8px; + color: #FFFFFF; + line-height: 1; + } + } + } + } + } + } + + .dataItem2 { + height: 25%; + flex-shrink: 0; + border: 1px solid rgba(255, 197, 188, 1); + border-radius: 4px; + margin: 0 15px; + margin-bottom: 6px; + display: flex; + align-items: center; + padding: 0px 15px; + background-color: #fff5f4; + + .dataItemLeft { + width: 65%; + display: flex; + flex-direction: column; + gap: 8px; + + .areaName { + font-family: PingFang SC; + font-weight: 400; + font-size: 13px; + color: #333333; + line-height: 2.2; + } + + .rValue { + font-family: PingFang SC; + font-weight: 400; + font-size: 14px; + color: #666666; + line-height: 0.2; + } + + .codeNumber { + font-family: PingFang SC; + font-weight: 400; + font-size: 12px; + color: #666666; + } + } + + .dataItemRight { + width: 35%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + + .circleContainer { + position: relative; + height: 80%; + aspect-ratio: 1; + + .outerCircle { + width: 100%; + height: 100%; + background-color: rgba(254, 214, 209, 1); + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + + .innerCircle { + width: 70%; + height: 70%; + background-color: rgba(253, 41, 14, 1); + border-radius: 50%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + .levelText { + font-family: PingFang SC; + font-weight: 500; + font-size: 11px; + color: #FFFFFF; + line-height: 1.4; + margin-top: -4px; + } + + .riskText { + font-family: PingFang SC; + font-weight: 300; + font-size: 8px; + color: #FFFFFF; + line-height: 1; + } + } + } + } + } + } + + .dataItem3 { + height: 25%; + flex-shrink: 0; + border: 1px solid rgba(255, 217, 178, 1); + border-radius: 4px; + margin: 0 15px; + margin-bottom: 6px; + display: flex; + align-items: center; + padding: 0px 15px; + background-color: #fef6f1; + + .dataItemLeft { + width: 65%; + display: flex; + flex-direction: column; + gap: 8px; + + .areaName { + font-family: PingFang SC; + font-weight: 400; + font-size: 13px; + color: #333333; + line-height: 2.2; + } + + .rValue { + font-family: PingFang SC; + font-weight: 400; + font-size: 14px; + color: #666666; + line-height: 0.2; + } + + .codeNumber { + font-family: PingFang SC; + font-weight: 400; + font-size: 12px; + color: #666666; + } + } + + .dataItemRight { + width: 35%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + + .circleContainer { + position: relative; + height: 80%; + aspect-ratio: 1; + + .outerCircle { + width: 100%; + height: 100%; + background-color: rgba(255, 234, 218, 1); + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + + .innerCircle { + width: 70%; + height: 70%; + background-color: rgba(252, 103, 18, 1); + border-radius: 50%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + .levelText { + font-family: PingFang SC; + font-weight: 500; + font-size: 11px; + color: #FFFFFF; + line-height: 1.4; + margin-top: -4px; + } + + .riskText { + font-family: PingFang SC; + font-weight: 300; + font-size: 8px; + color: #FFFFFF; + line-height: 1; + } + } + } + } + } + } + + .dataItem4 { + height: 25%; + flex-shrink: 0; + border: 1px solid #89E1FF; + border-radius: 4px; + margin: 0 15px; + margin-bottom: 6px; + display: flex; + align-items: center; + padding: 0px 15px; + background-color: #EFF9FF; + + .dataItemLeft { + width: 65%; + display: flex; + flex-direction: column; + gap: 8px; + + .areaName { + font-family: PingFang SC; + font-weight: 400; + font-size: 13px; + color: #333333; + line-height: 2.2; + } + + .rValue { + font-family: PingFang SC; + font-weight: 400; + font-size: 14px; + color: #666666; + line-height: 0.2; + } + + .codeNumber { + font-family: PingFang SC; + font-weight: 400; + font-size: 12px; + color: #666666; + } + } + + .dataItemRight { + width: 35%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + + .circleContainer { + position: relative; + height: 80%; + aspect-ratio: 1; + + .outerCircle { + width: 100%; + height: 100%; + background-color: rgba(51, 176, 253, 0.3); + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + + .innerCircle { + width: 70%; + height: 70%; + background-color: rgba(4, 128, 251, 0.8); + border-radius: 50%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + .levelText { + font-family: PingFang SC; + font-weight: 500; + font-size: 11px; + color: #FFFFFF; + line-height: 1.4; + margin-top: -4px; + } + + .riskText { + font-family: PingFang SC; + font-weight: 300; + font-size: 8px; + color: #FFFFFF; + line-height: 1; + } + } + } + } + } + } + } + + } + + .OcontainerBottom { + background-color: #fff; + flex: 1; + padding: 8px 15px 5px 15px; + display: flex; + flex-direction: column; + + .tableHeader { + display: flex; + justify-content: space-between; + align-items: center; + // margin-bottom: 15px; + padding-bottom: 5px; + // border-bottom: 1px solid #f0f0f0; + + .tableTitle { + display: flex; + align-items: center; + gap: 8px; + font-family: PingFang SC; + font-weight: 500; + font-size: 14px; + color: #333333; + + .titleIcon { + width: 3px; + height: 16px; + background-color: #2E4CD4; + } + } + + .tableActions { + display: flex; + gap: 8px; + + // 自定义按钮样式 + :global(.ant-btn) { + background-color: #ffffff !important; + border-color: #DFE4F6 !important; + color: #333333 !important; + box-shadow: none !important; + + &:hover { + background-color: #f5f5f5 !important; + border-color: #DFE4F6 !important; + color: #333333 !important; + box-shadow: none !important; + } + + &:focus { + background-color: #ffffff !important; + border-color: #DFE4F6 !important; + color: #333333 !important; + box-shadow: none !important; + } + + &:active { + background-color: #e6e6e6 !important; + border-color: #DFE4F6 !important; + color: #333333 !important; + box-shadow: none !important; + } + + // 主要按钮样式 + &.ant-btn-primary { + background-color: #ffffff !important; + border-color: #DFE4F6 !important; + color: #333333 !important; + box-shadow: none !important; + + &:hover { + background-color: #f5f5f5 !important; + border-color: #DFE4F6 !important; + color: #333333 !important; + box-shadow: none !important; + } + + &:focus { + background-color: #ffffff !important; + border-color: #DFE4F6 !important; + color: #333333 !important; + box-shadow: none !important; + } + + &:active { + background-color: #e6e6e6 !important; + border-color: #DFE4F6 !important; + color: #333333 !important; + box-shadow: none !important; + } + } + + // 危险按钮样式 + &.ant-btn-dangerous { + background-color: #ffffff !important; + border-color: #DFE4F6 !important; + color: #333333 !important; + box-shadow: none !important; + + &:hover { + background-color: #f5f5f5 !important; + border-color: #DFE4F6 !important; + color: #333333 !important; + box-shadow: none !important; + } + + &:focus { + background-color: #ffffff !important; + border-color: #DFE4F6 !important; + color: #333333 !important; + box-shadow: none !important; + } + + &:active { + background-color: #e6e6e6 !important; + border-color: #DFE4F6 !important; + color: #333333 !important; + box-shadow: none !important; + } + } + + // 禁用状态 + &:disabled { + background-color: #f5f5f5 !important; + border-color: #d9d9d9 !important; + color: #bfbfbf !important; + box-shadow: none !important; + } + } + } + } + + .tableContainer { + flex: 1; + overflow: hidden; + + :global(.ant-table) { + font-size: 12px; + } + + :global(.ant-table-thead > tr > th) { + background-color: #f5f5fa; + font-weight: 500; + font-size: 14px; + color: #333333; + border-bottom: 1px solid #f0f0f0; + padding: 8px 12px; + text-align: center; + } + + :global(.ant-table-tbody > tr > td) { + padding: 8px 12px; + border-bottom: 1px solid #f0f0f0; + text-align: center; + } + + :global(.ant-table-tbody > tr:hover > td) { + background-color: #f5f5f5; + } + + :global(.ant-pagination) { + margin-top: 16px; + text-align: right; + } + } + } + +} \ No newline at end of file diff --git a/src/pages/business_envmonitoring/components/secondary_menu/AbnormalAlarmInformation.js b/src/pages/business_envmonitoring/components/secondary_menu/AbnormalAlarmInformation.js new file mode 100644 index 0000000..94a16f3 --- /dev/null +++ b/src/pages/business_envmonitoring/components/secondary_menu/AbnormalAlarmInformation.js @@ -0,0 +1,196 @@ +import React, { useState } from 'react'; +import { Button, Input, Select, Switch } from 'antd'; +import { SearchOutlined, RedoOutlined, UploadOutlined, DownloadOutlined, DeleteOutlined } from '@ant-design/icons'; +import StandardTable from '@/components/StandardTable'; +import styles from './AbnormalAlarmInformation.less'; + +const AbnormalAlarmInformation = () => { + const [activeTab, setActiveTab] = useState('actual'); + + // 表格数据与图片一致 + const [tableData, setTableData] = useState([ + { key: 1, siteName: '2025-08-29', monitorFactor: '赵若行', alarmCount: '郑祥飞', autoHandle: false }, + { key: 2, siteName: '2025-09-02', monitorFactor: '王翠琪', alarmCount: '赵广峰', autoHandle: true }, + { key: 3, siteName: '2025-09-06', monitorFactor: '王翠琪', alarmCount: '郑嘉亨', autoHandle: true }, + { key: 4, siteName: '2025-08-22', monitorFactor: '王锦瑞', alarmCount: '赵玉', autoHandle: true }, + { key: 5, siteName: '2025-08-31', monitorFactor: '吴子鑫', alarmCount: '钱如珩', autoHandle: true }, + { key: 6, siteName: '2025-08-29', monitorFactor: '何凤彬', alarmCount: '赵润琪', autoHandle: false }, + { key: 7, siteName: '2025-08-28', monitorFactor: '李树烈', alarmCount: '李建刚', autoHandle: false }, + { key: 8, siteName: '2025-08-22', monitorFactor: '赵午光', alarmCount: '钱瑞西', autoHandle: false }, + { key: 9, siteName: '2025-08-21', monitorFactor: '王凤妍', alarmCount: '李金涛', autoHandle: false }, + { key: 10, siteName: '2025-09-09', monitorFactor: '赵涛', alarmCount: '何倩', autoHandle: false }, + ]); + + // 表格列定义 + const handleSwitchChange = (checked, record) => { + setTableData(prevData => prevData.map(item => + item.key === record.key ? { ...item, autoHandle: checked } : item + )); + }; + + const normalColumns = [ + { + title: '序号', + dataIndex: 'key', + key: 'key', + align: 'center', + width: 60, + }, + { + title: '站点名称', + dataIndex: 'siteName', + key: 'siteName', + align: 'left', + }, + { + title: '监测因子', + dataIndex: 'monitorFactor', + key: 'monitorFactor', + align: 'left', + }, + { + title: '报警次数', + dataIndex: 'alarmCount', + key: 'alarmCount', + align: 'left', + }, + { + title: '异常自动报警', + dataIndex: 'autoHandle', + key: 'autoHandle', + align: 'left', + render: (text, record) => ( + handleSwitchChange(checked, record)} /> + ), + }, + { + title: '详情', + key: 'detail', + align: 'left', + render: () => 查看, + }, + ]; + + // 获取当前标签页的数据 + const getCurrentData = () => { + switch (activeTab) { + case 'actual': + case 'excessive': + case 'equipment': + return tableData; + default: + return tableData; + } + }; + + // 获取当前标签页的列定义 + const getCurrentColumns = () => { + switch (activeTab) { + case 'actual': + case 'excessive': + case 'equipment': + return normalColumns; + default: + return normalColumns; + } + }; + + // 分页配置 + const pagination = { + current: 1, + pageSize: 10, + total: 12, + showTotal: (total) => `共 ${total} 条`, + showSizeChanger: true, + showQuickJumper: true, + }; + + return ( +
+
+
+ + + +
+ +
+ + + + + + + + + + + + + +
+ + {/* 第二块：表格 */} +
+ `共 ${total} 条`, + showSizeChanger: false, + } + }} + onChange={handleTableChange} + scroll={{ x: 'max-content' }} + /> +
+ + {/* 图片弹窗 */} + setIsModalVisible(false)} + footer={null} + closeIcon={} + width="auto" + centered + styles={{ + mask: { backgroundColor: '#10101080' }, + content: { padding: 0, background: 'transparent', boxShadow: 'none' } + }} + > + {currentImage && 许可证} + +
+ ); +}; + +export default AlarmInformation; diff --git a/src/pages/business_envmonitoring/components/secondary_menu/AlarmInformation.less b/src/pages/business_envmonitoring/components/secondary_menu/AlarmInformation.less new file mode 100644 index 0000000..ad4c8ec --- /dev/null +++ b/src/pages/business_envmonitoring/components/secondary_menu/AlarmInformation.less @@ -0,0 +1,213 @@ +.wasteGasContainer { + width: 100%; + height: 100%; + // padding: 20px; + background-color: #fff; + display: flex; + flex-direction: column; + margin: 0; + padding: 0; + .switchContainer { + width: 200px; + display: flex; + justify-content: space-between; + align-items: center; + height: 30px; + line-height: 30px; + background-color: #F4F4F4; + border-radius: 6px; + padding: 0 15px; + } + .searchSection { + padding: 20px; + display: flex; + justify-content: space-between; + align-items: center; + + .leftButtons { + display: flex; + gap: 12px; + + .addButton { + background-color: #00D48A; + border-color: #00D48A; + color: white; + height: 32px; + border-radius: 4px; + display: flex; + align-items: center; + + &:hover { + background-color: #00D48A; + border-color: #00D48A; + } + } + + .importButton { + background-color: white; + border-color: #d9d9d9; + color: #333; + height: 32px; + border-radius: 4px; + + &:hover { + border-color: #40a9ff; + color: #40a9ff; + } + } + } + + .rightControls { + display: flex; + align-items: center; + gap: 12px; + + .filterLabel { + color: #333; + font-size: 14px; + white-space: nowrap; + } + + .queryButton { + background-color: #00D48A; + border-color: #00D48A; + color: white; + height: 28px; + border-radius: 4px; + display: flex; + align-items: center; + justify-content: center; + + &:hover { + background-color: #00D48A; + border-color: #00D48A; + } + } + + .selectInput { + :global { + .ant-select-selector { + display: flex; + align-items: center; + height: 28px !important; + } + + .ant-select-selection-item { + display: flex; + align-items: center; + line-height: 1; + } + + .ant-select-selection-placeholder { + display: flex; + align-items: center; + line-height: 1; + } + } + } + } + } + + .tableSection { + flex: 1; + display: flex; + flex-direction: column; + padding: 0 20px 0; + overflow: hidden; // 只设置垂直隐藏 + min-width: 0; // 确保可以收缩 + + :global { + .ant-spin-nested-loading { + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; + margin: 0; + padding: 0; + + .ant-spin-container { + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; + margin: 0; + padding: 0; + + .ant-table-wrapper { + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; + margin: 0; + padding: 0; + } + } + } + + .ant-table { + font-size: 12px; + + .ant-table-thead > tr > th { + background-color: #FAFAFA; + font-weight: 400; + color: #000000D9; + border-right: none; + text-align: center; + white-space: nowrap; // 防止换行 + overflow: hidden; + text-overflow: ellipsis; + } + + .ant-table-tbody > tr > td { + border-right: none; + color: #000000D9; + font-weight: 400; + text-align: center; + white-space: nowrap; // 防止换行 + overflow: hidden; + text-overflow: ellipsis; + } + + .ant-table-tbody > tr:hover > td { + background-color: #f5f5f5; + } + + // 固定列样式 + .ant-table-thead > tr > th.ant-table-cell-fix-left, + .ant-table-tbody > tr > td.ant-table-cell-fix-left { + // background-color: #FAFAFA; + z-index: 1; + } + + .ant-table-thead > tr > th.ant-table-cell-fix-right, + .ant-table-tbody > tr > td.ant-table-cell-fix-right { + // background-color: #FAFAFA; + z-index: 1; + } + + // 固定列阴影效果 + .ant-table-cell-fix-left { + // box-shadow: 0px 0 4px 0px #00000040; + } + + .ant-table-cell-fix-right { + // box-shadow: 0px 0 4px 0px #00000040; + } + + a { + color: #1890ff; + text-decoration: none; + + &:hover { + color: #40a9ff; + } + } + } + + .ant-pagination { + text-align: right; + margin-top: 25px !important; + } + } + } +} diff --git a/src/pages/business_envmonitoring/components/secondary_menu/ExhaustEmissionStandard.js b/src/pages/business_envmonitoring/components/secondary_menu/ExhaustEmissionStandard.js new file mode 100644 index 0000000..2bb107b --- /dev/null +++ b/src/pages/business_envmonitoring/components/secondary_menu/ExhaustEmissionStandard.js @@ -0,0 +1,617 @@ +import React, { useState } from 'react'; +import { Form, Input, Button, DatePicker, Space, Modal, Select, Switch } from 'antd'; +import { SearchOutlined, RedoOutlined, CloseOutlined, EyeOutlined, DeleteOutlined, PlusOutlined } from '@ant-design/icons'; +import StandardTable from '@/components/StandardTable'; +import styles from './ExhaustEmissionStandard.less'; + +const ExhaustEmissionStandard = () => { + const [form] = Form.useForm(); + const [isModalVisible, setIsModalVisible] = useState(false); + const [currentImage, setCurrentImage] = useState(null); + const [pagination, setPagination] = useState({ + current: 1, + pageSize: 10, + total: 12, + }); + const [selectedRowKeys, setSelectedRowKeys] = useState([]); + const [dataSource, setDataSource] = useState([ + // 图片表格数据 + { + key: 1, + region: '2025-08-29', + source: '赵喜行', + outletName: '郑叶飞', + outletNumber: '塞隆风湿酒(同仁堂)', + monitorTime: '35.236.217.212', + smokeHumidity: '6Dd888D-3d', + smokeFlow: '重量', + smokePressure: '2', + o2Content: 't', + o2Content2: 't', + }, + { + key: 2, + region: '2025-09-02', + source: '王嘉琪', + outletName: '赵子峰', + outletNumber: '复方水杨酸甲酯乳膏(曼秀雷敦)', + monitorTime: '65.177.48.116', + smokeHumidity: '3D8d4ffa-bD', + smokeFlow: '重量', + smokePressure: '2', + o2Content: 't', + o2Content2: 't', + }, + { + key: 3, + region: '2025-09-06', + source: '王嘉琪', + outletName: '郑清予', + outletNumber: '口炎清颗粒(大神)', + monitorTime: '111.161.135.125', + smokeHumidity: 'f9b89EB2-ae9', + smokeFlow: '重量', + smokePressure: '2', + o2Content: 't', + o2Content2: 't', + }, + { + key: 4, + region: '2025-09-06', + source: '王思琪', + outletName: '赵玉', + outletNumber: '烧结砖(茂祥)', + monitorTime: '162.208.135.147', + smokeHumidity: '0ca9DB56-DA', + smokeFlow: '重量', + smokePressure: '2', + o2Content: 't', + o2Content2: 't', + }, + { + key: 5, + region: '2025-08-31', + source: '吴子富', + outletName: '钱茂莉', + outletNumber: '云南白药(云南白药)', + monitorTime: '138.6.246.181', + smokeHumidity: 'bf0173D6-3cf', + smokeFlow: '重量', + smokePressure: '2', + o2Content: 't', + o2Content2: 't', + }, + { + key: 6, + region: '2025-08-30', + source: '何凤景', + outletName: '赵海洲', + outletNumber: '鹏程书局(修正)', + monitorTime: '134.80.173.128', + smokeHumidity: '55aACD54-69', + smokeFlow: '重量', + smokePressure: '2', + o2Content: 't', + o2Content2: 't', + }, + { + key: 7, + region: '2025-08-29', + source: '李计颖', + outletName: '李海洲', + outletNumber: '复方醋酸甲羟孕酮颗粒(妇复春)', + monitorTime: '218.169.25.43', + smokeHumidity: 'b0a849eD-9e', + smokeFlow: '重量', + smokePressure: '2', + o2Content: 't', + o2Content2: 't', + }, + { + key: 8, + region: '2025-08-26', + source: '赵年光', + outletName: '钱海莉', + outletNumber: '杜龙药酒', + monitorTime: '54.218.80.84', + smokeHumidity: 'b1D5cFbD-EA', + smokeFlow: '重量', + smokePressure: '2', + o2Content: 't', + o2Content2: 't', + }, + { + key: 9, + region: '2025-08-21', + source: '王凤妍', + outletName: '李金泽', + outletNumber: '和兴白花油(和兴白花油)', + monitorTime: '222.1.18.173', + smokeHumidity: 'fbc9cb69-F8B', + smokeFlow: '重量', + smokePressure: '2', + o2Content: 't', + o2Content2: 't', + }, + { + key: 10, + region: '2025-09-09', + source: '赵芳', + outletName: '何能', + outletNumber: '柔来期明含片(哈喽舒)', + monitorTime: '136.200.182.22', + smokeHumidity: 'e4b6adE6-8C1', + smokeFlow: '重量', + smokePressure: '2', + o2Content: 't', + o2Content2: 't', + }, + { + key: 5, + recordTime: '2025-08-29', + recorder: '赵喜行', + reviewer: '郑叶飞', + facilityName: '塞隆风湿酒(同仁堂)', + code: '35.236.217.212', + equipmentModel: '6Ddb888D-3d7A-305E-3372-109F7154Ad3A', + parameterName: '重量', + designValue: '2', + unit: 't', + startRunTime: '00:46', + endRunTime: '03:55', + isNormal: '正常', + pollutantFlueGasVolume: '1', + pollutantFactor: '烟尘', + treatmentEfficiency: '95.32', + dataSource: '实时采集', + exhaustStackHeight: '2', + exhaustTemperature: '50.48', + pressure: '100', + emissionTime: '115', + powerConsumption: '39', + byproductName: '氮气', + byproductProduction: '2', + reagentName: '乳酸钠葡萄糖', + reagentAdditionTime: '2025-09-01 07:53', + reagentAdditionAmount: '2', + }, + { + key: 6, + recordTime: '2025-08-29', + recorder: '赵喜行', + reviewer: '郑叶飞', + facilityName: '塞隆风湿酒(同仁堂)', + code: '35.236.217.212', + equipmentModel: '6Ddb888D-3d7A-305E-3372-109F7154Ad3A', + parameterName: '重量', + designValue: '2', + unit: 't', + startRunTime: '00:46', + endRunTime: '03:55', + isNormal: '正常', + pollutantFlueGasVolume: '1', + pollutantFactor: '烟尘', + treatmentEfficiency: '95.32', + dataSource: '实时采集', + exhaustStackHeight: '2', + exhaustTemperature: '50.48', + pressure: '100', + emissionTime: '115', + powerConsumption: '39', + byproductName: '氮气', + byproductProduction: '2', + reagentName: '乳酸钠葡萄糖', + reagentAdditionTime: '2025-09-01 07:53', + reagentAdditionAmount: '2', + }, + { + key: 7, + recordTime: '2025-08-29', + recorder: '赵喜行', + reviewer: '郑叶飞', + facilityName: '塞隆风湿酒(同仁堂)', + code: '35.236.217.212', + equipmentModel: '6Ddb888D-3d7A-305E-3372-109F7154Ad3A', + parameterName: '重量', + designValue: '2', + unit: 't', + startRunTime: '00:46', + endRunTime: '03:55', + isNormal: '正常', + pollutantFlueGasVolume: '1', + pollutantFactor: '烟尘', + treatmentEfficiency: '95.32', + dataSource: '实时采集', + exhaustStackHeight: '2', + exhaustTemperature: '50.48', + pressure: '100', + emissionTime: '115', + powerConsumption: '39', + byproductName: '氮气', + byproductProduction: '2', + reagentName: '乳酸钠葡萄糖', + reagentAdditionTime: '2025-09-01 07:53', + reagentAdditionAmount: '2', + }, + { + key: 8, + recordTime: '2025-08-29', + recorder: '赵喜行', + reviewer: '郑叶飞', + facilityName: '塞隆风湿酒(同仁堂)', + code: '35.236.217.212', + equipmentModel: '6Ddb888D-3d7A-305E-3372-109F7154Ad3A', + parameterName: '重量', + designValue: '2', + unit: 't', + startRunTime: '00:46', + endRunTime: '03:55', + isNormal: '正常', + pollutantFlueGasVolume: '1', + pollutantFactor: '烟尘', + treatmentEfficiency: '95.32', + dataSource: '实时采集', + exhaustStackHeight: '2', + exhaustTemperature: '50.48', + pressure: '100', + emissionTime: '115', + powerConsumption: '39', + byproductName: '氮气', + byproductProduction: '2', + reagentName: '乳酸钠葡萄糖', + reagentAdditionTime: '2025-09-01 07:53', + reagentAdditionAmount: '2', + }, + { + key: 9, + recordTime: '2025-08-29', + recorder: '赵喜行', + reviewer: '郑叶飞', + facilityName: '塞隆风湿酒(同仁堂)', + code: '35.236.217.212', + equipmentModel: '6Ddb888D-3d7A-305E-3372-109F7154Ad3A', + parameterName: '重量', + designValue: '2', + unit: 't', + startRunTime: '00:46', + endRunTime: '03:55', + isNormal: '正常', + pollutantFlueGasVolume: '1', + pollutantFactor: '烟尘', + treatmentEfficiency: '95.32', + dataSource: '实时采集', + exhaustStackHeight: '2', + exhaustTemperature: '50.48', + pressure: '100', + emissionTime: '115', + powerConsumption: '39', + byproductName: '氮气', + byproductProduction: '2', + reagentName: '乳酸钠葡萄糖', + reagentAdditionTime: '2025-09-01 07:53', + reagentAdditionAmount: '2', + }, + { + key: 10, + recordTime: '2025-08-29', + recorder: '赵喜行', + reviewer: '郑叶飞', + facilityName: '塞隆风湿酒(同仁堂)', + code: '35.236.217.212', + equipmentModel: '6Ddb888D-3d7A-305E-3372-109F7154Ad3A', + parameterName: '重量', + designValue: '2', + unit: 't', + startRunTime: '00:46', + endRunTime: '03:55', + isNormal: '正常', + pollutantFlueGasVolume: '1', + pollutantFactor: '烟尘', + treatmentEfficiency: '95.32', + dataSource: '实时采集', + exhaustStackHeight: '2', + exhaustTemperature: '50.48', + pressure: '100', + emissionTime: '115', + powerConsumption: '39', + byproductName: '氮气', + byproductProduction: '2', + reagentName: '乳酸钠葡萄糖', + reagentAdditionTime: '2025-09-01 07:53', + reagentAdditionAmount: '2', + }, + { + key: 11, + recordTime: '2025-08-29', + recorder: '赵喜行', + reviewer: '郑叶飞', + facilityName: '塞隆风湿酒(同仁堂)', + code: '35.236.217.212', + equipmentModel: '6Ddb888D-3d7A-305E-3372-109F7154Ad3A', + parameterName: '重量', + designValue: '2', + unit: 't', + startRunTime: '00:46', + endRunTime: '03:55', + isNormal: '正常', + pollutantFlueGasVolume: '1', + pollutantFactor: '烟尘', + treatmentEfficiency: '95.32', + dataSource: '实时采集', + exhaustStackHeight: '2', + exhaustTemperature: '50.48', + pressure: '100', + emissionTime: '115', + powerConsumption: '39', + byproductName: '氮气', + byproductProduction: '2', + reagentName: '乳酸钠葡萄糖', + reagentAdditionTime: '2025-09-01 07:53', + reagentAdditionAmount: '2', + }, + { + key: 12, + recordTime: '2025-08-29', + recorder: '赵喜行', + reviewer: '郑叶飞', + facilityName: '塞隆风湿酒(同仁堂)', + code: '35.236.217.212', + equipmentModel: '6Ddb888D-3d7A-305E-3372-109F7154Ad3A', + parameterName: '重量', + designValue: '2', + unit: 't', + startRunTime: '00:46', + endRunTime: '03:55', + isNormal: '正常', + pollutantFlueGasVolume: '1', + pollutantFactor: '烟尘', + treatmentEfficiency: '95.32', + dataSource: '实时采集', + exhaustStackHeight: '2', + exhaustTemperature: '50.48', + pressure: '100', + emissionTime: '115', + powerConsumption: '39', + byproductName: '氮气', + byproductProduction: '2', + reagentName: '乳酸钠葡萄糖', + reagentAdditionTime: '2025-09-01 07:53', + reagentAdditionAmount: '2', + }, + ]); + + const getCurrentPageData = () => { + const { current, pageSize } = pagination; + const start = (current - 1) * pageSize; + const end = start + pageSize; + return dataSource.slice(start, end); + }; + + const columns = [ + { + title: ( + 0} + onChange={(e) => handleSelectAll(e.target.checked)} + /> + ), + key: 'selection', + width: 60, + align: 'center', + fixed: 'left', + render: (_, record) => ( + { + if (e.target.checked) { + setSelectedRowKeys([...selectedRowKeys, record.key]); + } else { + setSelectedRowKeys(selectedRowKeys.filter(key => key !== record.key)); + } + }} + /> + ), + }, + { title: '所属区县', dataIndex: 'region', key: 'region', align: 'left' }, + { title: '污染源', dataIndex: 'source', key: 'source', align: 'left' }, + { title: '排口名称', dataIndex: 'outletName', key: 'outletName', align: 'left' }, + { title: '排口编号', dataIndex: 'outletNumber', key: 'outletNumber', align: 'left' }, + { title: '监测时间', dataIndex: 'monitorTime', key: 'monitorTime', align: 'left' }, + { title: '烟气湿度', dataIndex: 'smokeHumidity', key: 'smokeHumidity', align: 'left' }, + { title: '烟气流速', dataIndex: 'smokeFlow', key: 'smokeFlow', align: 'left' }, + { title: '烟气压力', dataIndex: 'smokePressure', key: 'smokePressure', align: 'left' }, + { title: 'O₂含量', dataIndex: 'o2Content', key: 'o2Content', align: 'left' }, + { title: 'O₂含量', dataIndex: 'o2Content2', key: 'o2Content2', align: 'left' }, + ]; + + const handleSearch = (values) => { + console.log('搜索参数:', values); + // TODO: 实现搜索功能 + }; + + const handleReset = () => { + form.resetFields(); + // TODO: 重置搜索 + }; + + const handleView = (record) => { + console.log('查看:', record); + // TODO: 实现查看功能 + }; + + const handleEdit = (record) => { + console.log('编辑:', record); + // TODO: 实现编辑功能 + }; + + const handleDownload = (record) => { + console.log('下载:', record); + // TODO: 实现下载功能 + }; + + const handleDelete = (record) => { + console.log('删除:', record); + // TODO: 实现删除功能 + }; + + const handleAdd = () => { + console.log('新增'); + // TODO: 实现新增功能 + }; + + const handleImport = () => { + console.log('导入'); + // TODO: 实现导入功能 + }; + + const handleQuery = () => { + console.log('查询'); + // TODO: 实现查询功能 + }; + + const handleTableChange = (pagination) => { + setPagination(pagination); + }; + + // 全选功能 + const handleSelectAll = (checked) => { + if (checked) { + const allKeys = getCurrentPageData().map(item => item.key); + setSelectedRowKeys(allKeys); + } else { + setSelectedRowKeys([]); + } + }; + + // 批量操作 + const handleBatchOperation = (operation) => { + console.log(`批量${operation}:`, selectedRowKeys); + // TODO: 实现批量操作功能 + }; + + return ( +
+ {/* 第一块：操作按钮和筛选条件 */} +
+
+ + + +
+ 仅显示异常信息 + +
+
+ +
+ + 0} + onChange={(e) => handleSelectAll(e.target.checked)} + /> + ), + key: 'selection', + width: 60, + align: 'center', + fixed: 'left', + render: (_, record) => ( + { + if (e.target.checked) { + setSelectedRowKeys([...selectedRowKeys, record.key]); + } else { + setSelectedRowKeys(selectedRowKeys.filter(key => key !== record.key)); + } + }} + /> + ), + }, + { + title: '记录时间', + dataIndex: 'recordTime', + key: 'recordTime', + width: 120, + align: 'center', + }, + { + title: '记录人', + dataIndex: 'recorder', + key: 'recorder', + width: 100, + align: 'center', + }, + { + title: '审核人', + dataIndex: 'reviewer', + key: 'reviewer', + width: 100, + align: 'center', + }, + { + title: '设施名称', + dataIndex: 'facilityName', + key: 'facilityName', + width: 200, + }, + { + title: '编码', + dataIndex: 'code', + key: 'code', + width: 150, + }, + { + title: '设施型号', + dataIndex: 'facilityModel', + key: 'facilityModel', + width: 200, + }, + { + title: '参数名称', + dataIndex: 'parameterName', + key: 'parameterName', + width: 120, + align: 'center', + }, + { + title: '设计值', + dataIndex: 'designValue', + key: 'designValue', + width: 100, + align: 'center', + }, + { + title: '单位', + dataIndex: 'unit', + key: 'unit', + width: 80, + align: 'center', + }, + { + title: '开始运行时间', + dataIndex: 'startRunTime', + key: 'startRunTime', + width: 120, + align: 'center', + }, + { + title: '结束运行时间', + dataIndex: 'endRunTime', + key: 'endRunTime', + width: 120, + align: 'center', + }, + { + title: '是否正常', + dataIndex: 'isNormal', + key: 'isNormal', + width: 100, + align: 'center', + render: (text) => ( + + {text} + + ), + }, + { + title: '污染物出口流量(m³/h)', + dataIndex: 'pollutantOutletFlow', + key: 'pollutantOutletFlow', + width: 150, + align: 'center', + }, + { + title: '污染因子', + dataIndex: 'pollutantFactor', + key: 'pollutantFactor', + width: 120, + align: 'center', + }, + { + title: '治理效率(%)', + dataIndex: 'treatmentEfficiency', + key: 'treatmentEfficiency', + width: 120, + align: 'center', + }, + { + title: '数据来源', + dataIndex: 'dataSource', + key: 'dataSource', + width: 120, + align: 'center', + }, + { + title: '排放去向', + dataIndex: 'dischargeDestination', + key: 'dischargeDestination', + width: 120, + align: 'center', + }, + { + title: '污泥产生量(t)', + dataIndex: 'sludgeProduction', + key: 'sludgeProduction', + width: 130, + align: 'center', + }, + { + title: '处理方式', + dataIndex: 'treatmentMethod', + key: 'treatmentMethod', + width: 120, + align: 'center', + }, + { + title: '耗电量(kWh)', + dataIndex: 'powerConsumption', + key: 'powerConsumption', + width: 120, + align: 'center', + }, + { + title: '药剂名称', + dataIndex: 'reagentName', + key: 'reagentName', + width: 120, + align: 'center', + }, + { + title: '药剂添加时间', + dataIndex: 'reagentAdditionTime', + key: 'reagentAdditionTime', + width: 150, + align: 'center', + }, + { + title: '药剂添加量(t)', + dataIndex: 'reagentAdditionAmount', + key: 'reagentAdditionAmount', + width: 140, + align: 'center', + }, + { + title: '操作', + key: 'action', + width: 140, + align: 'center', + fixed: 'right', + render: (_, record) => ( + + {/* 查看 handleView(record)} + /> */} + 编辑 handleEdit(record)} + /> + 下载 handleDownload(record)} + /> + 删除 handleDelete(record)} + /> + + ), + }, + ]; + + const handleSearch = (values) => { + console.log('搜索参数:', values); + // TODO: 实现搜索功能 + }; + + const handleReset = () => { + form.resetFields(); + // TODO: 重置搜索 + }; + + const handleView = (record) => { + console.log('查看:', record); + // TODO: 实现查看功能 + }; + + const handleEdit = (record) => { + console.log('编辑:', record); + // TODO: 实现编辑功能 + }; + + const handleDownload = (record) => { + console.log('下载:', record); + // TODO: 实现下载功能 + }; + + const handleDelete = (record) => { + console.log('删除:', record); + // TODO: 实现删除功能 + }; + + const handleAdd = () => { + console.log('新增'); + // TODO: 实现新增功能 + }; + + const handleImport = () => { + console.log('导入'); + // TODO: 实现导入功能 + }; + + const handleQuery = () => { + console.log('查询'); + // TODO: 实现查询功能 + }; + + const handleTableChange = (pagination) => { + setPagination(pagination); + }; + + // 全选功能 + const handleSelectAll = (checked) => { + if (checked) { + const allKeys = getCurrentPageData().map(item => item.key); + setSelectedRowKeys(allKeys); + } else { + setSelectedRowKeys([]); + } + }; + + // 批量操作 + const handleBatchOperation = (operation) => { + console.log(`批量${operation}:`, selectedRowKeys); + // TODO: 实现批量操作功能 + }; + + return ( +
+ {/* 第一块：操作按钮和筛选条件 */} +
+
+ + + + {/* */} +
+ +
+ 筛选条件 + + + +
+
+ + {/* 第二块：表格 */} +
+ `共 ${total} 条`, + showSizeChanger: false, + } + }} + onChange={handleTableChange} + scroll={{ x: 3000 }} + /> +
+ + {/* 图片弹窗 */} + setIsModalVisible(false)} + footer={null} + closeIcon={} + width="auto" + centered + styles={{ + mask: { backgroundColor: '#10101080' }, + content: { padding: 0, background: 'transparent', boxShadow: 'none' } + }} + > + {currentImage && 许可证} + +
+ ); +}; + +export default WastewaterFacilityManagement; \ No newline at end of file diff --git a/src/pages/business_envmonitoring/components/secondary_menu/WastewaterFacilityManagement.less b/src/pages/business_envmonitoring/components/secondary_menu/WastewaterFacilityManagement.less new file mode 100644 index 0000000..6d2aaec --- /dev/null +++ b/src/pages/business_envmonitoring/components/secondary_menu/WastewaterFacilityManagement.less @@ -0,0 +1,206 @@ +.wastewaterFacilityContainer { + width: 100%; + height: 100%; + // padding: 20px; + background-color: #fff; + display: flex; + flex-direction: column; + margin: 0; + padding: 0; + + .searchSection { + padding: 20px; + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 16px; + + .leftButtons { + display: flex; + gap: 12px; + + .addButton { + background-color: #52c41a; + border-color: #52c41a; + color: white; + height: 32px; + border-radius: 4px; + display: flex; + align-items: center; + gap: 4px; + + &:hover { + background-color: #73d13d; + border-color: #73d13d; + } + } + + .importButton { + background-color: white; + border-color: #d9d9d9; + color: #333; + height: 32px; + border-radius: 4px; + + &:hover { + border-color: #40a9ff; + color: #40a9ff; + } + } + } + + .rightControls { + display: flex; + align-items: center; + gap: 12px; + + .filterLabel { + color: #333; + font-size: 14px; + white-space: nowrap; + } + + .queryButton { + background-color: #52c41a; + border-color: #52c41a; + color: white; + height: 28px; + border-radius: 4px; + display: flex; + align-items: center; + justify-content: center; + + &:hover { + background-color: #73d13d; + border-color: #73d13d; + } + } + + .selectInput { + :global { + .ant-select-selector { + display: flex; + align-items: center; + height: 28px !important; + } + + .ant-select-selection-item { + display: flex; + align-items: center; + line-height: 1; + } + + .ant-select-selection-placeholder { + display: flex; + align-items: center; + line-height: 1; + } + } + } + } + } + + .tableSection { + flex: 1; + display: flex; + flex-direction: column; + padding: 0 20px 0; + overflow: hidden; // 只设置垂直隐藏 + min-width: 0; // 确保可以收缩 + + + :global { + .ant-spin-nested-loading { + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; + margin: 0; + padding: 0; + + .ant-spin-container { + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; + margin: 0; + padding: 0; + + .ant-table-wrapper { + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; + margin: 0; + padding: 0; + } + } + } + + .ant-table { + font-size: 12px; + + .ant-table-thead > tr > th { + background-color: #fafafa; + font-weight: 400; + color: #000000D9; + border-right: none; + text-align: center; + white-space: nowrap; // 防止换行 + overflow: hidden; + text-overflow: ellipsis; + } + + .ant-table-tbody > tr > td { + border-right: none; + color: #000000D9; + font-weight: 400; + text-align: center; + white-space: nowrap; // 防止换行 + overflow: hidden; + text-overflow: ellipsis; + } + + .ant-table-tbody > tr:hover > td { + background-color: #f5f5f5; + } + + // 固定列样式 + .ant-table-thead > tr > th.ant-table-cell-fix-left, + .ant-table-tbody > tr > td.ant-table-cell-fix-left { + background-color: #fafafa; + z-index: 1; + } + + .ant-table-thead > tr > th.ant-table-cell-fix-right, + .ant-table-tbody > tr > td.ant-table-cell-fix-right { + background-color: #fafafa; + z-index: 1; + } + + // 固定列阴影效果 + .ant-table-cell-fix-left { + // box-shadow: 0px 0 4px 0px #00000040; + } + + .ant-table-cell-fix-right { + // box-shadow: 0px 0 4px 0px #00000040; + } + + a { + color: #1890ff; + text-decoration: none; + + &:hover { + color: #40a9ff; + } + } + } + + .ant-pagination { + text-align: right; + margin-top: 25px !important; + } + } + } +} \ No newline at end of file diff --git a/src/pages/business_envmonitoring/module/OnlineMonitoring.js b/src/pages/business_envmonitoring/module/OnlineMonitoring.js new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/business_envmonitoring/module/OnlineMonitoring.less b/src/pages/business_envmonitoring/module/OnlineMonitoring.less new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/nav_system_content/SystemContentList.js b/src/pages/nav_system_content/SystemContentList.js index 5ffb225..f29be8a 100644 --- a/src/pages/nav_system_content/SystemContentList.js +++ b/src/pages/nav_system_content/SystemContentList.js @@ -20,6 +20,7 @@ import license from '@/assets/img/license.svg' import people from '@/assets/img/people.svg' import risk from '@/assets/img/risk.svg' import inforicon from '@/assets/business_basic/inforicon.svg' +import alarm from '@/assets/business_envmonitoring/alarm.svg' import { CustomBreadcrumb } from '@/components/GlobalComponent' @@ -90,17 +91,46 @@ const SystemContentList = (props) => { const fixedMenuItems = [ { "path": "/topnavbar00/business/envInformation", + icon: 环保信息管理, + "key": "/topnavbar00/business/envInformation", + "label": "环保信息管理" + }, + { + "path": "/topnavbar00/business/atmospherePollutantLibrary", icon: 环保信息管理, - "key": "/topnavbar00/business/envInformation", - "label": "环保信息管理" + "key": "/topnavbar00/business/atmospherePollutantLibrary", + "label": "大气污染特征污染物名录库", + "hideInMenu": true // 隐藏菜单，但允许路由匹配 + }, + { + "path": "/topnavbar00/business/envmonitoring", + icon: 环保监测管理, + "key": "/topnavbar00/business/envmonitoring", + "label": "环保监测管理" }, { "path": "/topnavbar00/business/basicinformation", diff --git a/src/pages/topnavbar/TopNavBar.js b/src/pages/topnavbar/TopNavBar.js index 335cf55..95de310 100644 --- a/src/pages/topnavbar/TopNavBar.js +++ b/src/pages/topnavbar/TopNavBar.js @@ -18,8 +18,8 @@ const menuItem = [ key: '/topnavbar00/business/atmospherePollutantLibrary', }, { - label: '安全管理基础信息', - key: '/topnavbar00/business/basicinformation', + label: '环保检测管理', + key: '/topnavbar00/business/envmonitoring', }, { label: '隐患排查',