diff --git a/src/assets/img/icon1.svg b/src/assets/img/icon1.svg index a15c04a..bfabef8 100644 --- a/src/assets/img/icon1.svg +++ b/src/assets/img/icon1.svg @@ -1,7 +1,15 @@ - - - - - - + + + + + + + + + + + + + + diff --git a/src/assets/img/menu2.svg b/src/assets/img/menu2.svg new file mode 100644 index 0000000..3bd5929 --- /dev/null +++ b/src/assets/img/menu2.svg @@ -0,0 +1,45 @@ + + +
 + + + + + + +
 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/img/menuBg.png b/src/assets/img/menuBg.png new file mode 100644 index 0000000..5c118e2 Binary files /dev/null and b/src/assets/img/menuBg.png differ diff --git a/src/assets/img/智能管控平台-1.svg b/src/assets/img/智能管控平台-1.svg deleted file mode 100644 index 06f318c..0000000 --- a/src/assets/img/智能管控平台-1.svg +++ /dev/null @@ -1,40 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/img/智能管控平台.svg b/src/assets/img/智能管控平台.svg index e46fcc8..3191ef6 100644 --- a/src/assets/img/智能管控平台.svg +++ b/src/assets/img/智能管控平台.svg @@ -1,8 +1,33 @@ - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/GlobalComponent/Breadcrumb.jsx b/src/components/GlobalComponent/Breadcrumb.jsx index 07d8e21..1ea3436 100644 --- a/src/components/GlobalComponent/Breadcrumb.jsx +++ b/src/components/GlobalComponent/Breadcrumb.jsx @@ -247,7 +247,7 @@ const CustomBreadcrumb = () => { }, [location.pathname]); return ( -
+
{breadcrumbList.map((item, index) => ( { - const [activeModule, setActiveModule] = useState('organization'); + const [activeModule, setActiveModule] = useState('oilData'); const handleModuleClick = (module) => { setActiveModule(module) } - const renderModule = () => { switch (activeModule) { - case 'organization': - return ; - case 'license': - return ; - case 'equipment': - return ; - case 'firefighting': - return ; - case 'other': - return ; + case 'oilData': + return ; + case 'customerInfo': + return ; + case 'dataModeling': + return ; default: - return ; + return ; } }; @@ -39,24 +31,19 @@ const SafeMajorHazardList = () => {
-
diff --git a/src/pages/business_basic/basic.less b/src/pages/business_basic/basic.less index b479169..1afe67f 100644 --- a/src/pages/business_basic/basic.less +++ b/src/pages/business_basic/basic.less @@ -1,5 +1,4 @@ .container { - background-color: transparent; width: 100%; height: 89vh; overflow: hidden; @@ -7,7 +6,7 @@ flex-direction: column; .TopButton { - background-color: white; + background-color: #FFFFFF; width: 100%; padding: 10px 30px; display: flex; diff --git a/src/pages/business_basic/components/CustomerInfoManagement.js b/src/pages/business_basic/components/CustomerInfoManagement.js new file mode 100644 index 0000000..45398d2 --- /dev/null +++ b/src/pages/business_basic/components/CustomerInfoManagement.js @@ -0,0 +1,122 @@ +import React from 'react'; +import { Card, Table, Input, Button, Space } from 'antd'; +import { PlusOutlined, SearchOutlined } from '@ant-design/icons'; +import styles from './CustomerInfoManagement.less'; + +const CustomerInfoManagement = () => { + const onSearch = (value) => { + console.log('搜索内容:', value); + }; + + const columns = [ + { + title: '编号', + dataIndex: 'id', + key: 'id', + width: 80, + }, + { + title: '客户名称', + dataIndex: 'customerName', + key: 'customerName', + width: 150, + }, + { + title: '联系人', + dataIndex: 'contact', + key: 'contact', + width: 120, + }, + { + title: '联系电话', + dataIndex: 'phone', + key: 'phone', + width: 150, + }, + { + title: '公司地址', + dataIndex: 'address', + key: 'address', + width: 200, + }, + { + title: '客户类型', + dataIndex: 'customerType', + key: 'customerType', + width: 120, + }, + { + title: '创建时间', + dataIndex: 'createTime', + key: 'createTime', + width: 180, + }, + { + title: '操作', + dataIndex: 'action', + key: 'action', + width: 150, + render: (text, record) => ( + + + + + ), + }, + ]; + + const tableData = [ + { + key: '1', + id: '001', + customerName: '某某石油公司', + contact: '张经理', + phone: '138****8888', + address: '北京市朝阳区xxx路xxx号', + customerType: '企业客户', + createTime: '2024-12-20 10:00:00', + }, + { + key: '2', + id: '002', + customerName: '某某加油站', + contact: '李经理', + phone: '139****9999', + address: '上海市浦东新区xxx路xxx号', + customerType: '零售客户', + createTime: '2024-12-20 10:00:00', + }, + ]; + + return ( +
+ +
+
客户信息管理
+ + } + /> + + +
+ `共 ${total} 条`, + }} + /> + + + ); +}; + +export default CustomerInfoManagement; + diff --git a/src/pages/business_basic/components/CustomerInfoManagement.less b/src/pages/business_basic/components/CustomerInfoManagement.less new file mode 100644 index 0000000..6b1387b --- /dev/null +++ b/src/pages/business_basic/components/CustomerInfoManagement.less @@ -0,0 +1,19 @@ +.container { + padding: 20px; + background: #f5f5f5; + min-height: 100%; + + .header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20px; + + .title { + font-size: 18px; + font-weight: 600; + color: #333; + } + } +} + diff --git a/src/pages/business_basic/components/DataModeling.js b/src/pages/business_basic/components/DataModeling.js new file mode 100644 index 0000000..78401f3 --- /dev/null +++ b/src/pages/business_basic/components/DataModeling.js @@ -0,0 +1,136 @@ +import React from 'react'; +import { Card, Table, Input, Button, Space } from 'antd'; +import { PlusOutlined, SearchOutlined } from '@ant-design/icons'; +import styles from './DataModeling.less'; + +const DataModeling = () => { + const onSearch = (value) => { + console.log('搜索内容:', value); + }; + + const columns = [ + { + title: '编号', + dataIndex: 'id', + key: 'id', + width: 80, + }, + { + title: '模型名称', + dataIndex: 'modelName', + key: 'modelName', + width: 150, + }, + { + title: '模型类型', + dataIndex: 'modelType', + key: 'modelType', + width: 120, + }, + { + title: '数据源', + dataIndex: 'dataSource', + key: 'dataSource', + width: 150, + }, + { + title: '状态', + dataIndex: 'status', + key: 'status', + width: 100, + render: (text) => { + const statusMap = { + '运行中': { color: '#52c41a', bg: '#f6ffed' }, + '已停止': { color: '#ff4d4f', bg: '#fff1f0' }, + '待启动': { color: '#faad14', bg: '#fffbe6' }, + }; + const style = statusMap[text] || {}; + return ( + + {text} + + ); + }, + }, + { + title: '创建时间', + dataIndex: 'createTime', + key: 'createTime', + width: 180, + }, + { + title: '操作', + dataIndex: 'action', + key: 'action', + width: 200, + render: (text, record) => ( + + + + + + ), + }, + ]; + + const tableData = [ + { + key: '1', + id: '001', + modelName: '销售预测模型', + modelType: '预测模型', + dataSource: '销售数据表', + status: '运行中', + createTime: '2024-12-20 10:00:00', + }, + { + key: '2', + id: '002', + modelName: '库存分析模型', + modelType: '分析模型', + dataSource: '库存数据表', + status: '已停止', + createTime: '2024-12-20 10:00:00', + }, + ]; + + return ( +
+ +
+
数据建模
+ + } + /> + + +
+
`共 ${total} 条`, + }} + /> + + + ); +}; + +export default DataModeling; + diff --git a/src/pages/business_basic/components/DataModeling.less b/src/pages/business_basic/components/DataModeling.less new file mode 100644 index 0000000..6b1387b --- /dev/null +++ b/src/pages/business_basic/components/DataModeling.less @@ -0,0 +1,19 @@ +.container { + padding: 20px; + background: #f5f5f5; + min-height: 100%; + + .header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20px; + + .title { + font-size: 18px; + font-weight: 600; + color: #333; + } + } +} + diff --git a/src/pages/business_basic/components/EvaluationReport.js b/src/pages/business_basic/components/EvaluationReport.js deleted file mode 100644 index ce61baa..0000000 --- a/src/pages/business_basic/components/EvaluationReport.js +++ /dev/null @@ -1,922 +0,0 @@ -import React, { useEffect, useRef, useState } from 'react'; -import { Card, Result, Select, Button, Segmented, Progress, Input } from 'antd'; -import { CheckCircleOutlined, ExportOutlined, HeartFilled, LineHeightOutlined, ExclamationCircleOutlined, SearchOutlined } from '@ant-design/icons'; -import * as echarts from 'echarts'; -import StandardTable from '@/components/StandardTable'; -import styles from './EvaluationReport.less'; - -import img1 from '@/assets/safe_majorHazard/online_monitoring/img1.png'; -import img2 from '@/assets/safe_majorHazard/online_monitoring/img2.png'; -import img3 from '@/assets/safe_majorHazard/online_monitoring/img3.png'; -import map1 from '@/assets/safe_majorHazard/online_monitoring/map.png'; -import risk1 from '@/assets/safe_majorHazard/online_monitoring/risk1.png'; -import risk2 from '@/assets/safe_majorHazard/online_monitoring/risk2.png'; -import risk3 from '@/assets/safe_majorHazard/online_monitoring/risk3.png'; -import eqicon1 from '@/assets/business_basic/eqicon1.png'; -import eqicon2 from '@/assets/business_basic/eqicon2.png'; -import eqicon3 from '@/assets/business_basic/eqicon3.png'; -import eqicon4 from '@/assets/business_basic/eqicon4.png'; - -const EvaluationReport = () => { - const chartRef = useRef(null); - const pieChartRef = useRef(null); - const faultPieChartRef = useRef(null); - const [selectedRowKeys, setSelectedRowKeys] = useState([]); - const [selectedRows, setSelectedRows] = useState([]); - const [loading, setLoading] = useState(false); - const [dataSource, setDataSource] = useState([]); - const [pagination, setPagination] = useState({ - current: 1, - pageSize: 8, - total: 0, - }); - const [searchText, setSearchText] = useState(''); - - // 柱状图初始化 - useEffect(() => { - if (pieChartRef.current) { - const barChart = echarts.init(pieChartRef.current); - - const barOption = { - grid: { - left: '5%', - right: '5%', - bottom: '10%', - top: '20%', - containLabel: true - }, - xAxis: { - type: 'category', - data: ['灭火器', '消火栓', '报警器', '疏散灯', '排烟设备'], - axisLabel: { - fontSize: 12, - color: '#333', - interval: 0, - rotate: 0 - }, - axisLine: { - show: false - }, - axisTick: { - show: false - } - }, - yAxis: { - type: 'value', - min: 0, - max: 50, - interval: 10, - axisLabel: { - fontSize: 12, - color: '#666', - formatter: '{value}' - }, - axisLine: { - show: false - }, - axisTick: { - show: false - }, - splitLine: { - lineStyle: { - color: '#00001A26', - type: 'dashed' - } - } - }, - series: [{ - name: '使用次数', - type: 'bar', - barWidth: 27, - data: [35, 28, 42, 31, 38], - itemStyle: { - color: { - type: 'linear', - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [ - { offset: 0, color: '#199BFB' }, - { offset: 1, color: '#1373FA' } - ] - } - }, - emphasis: { - itemStyle: { - color: { - type: 'linear', - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [ - { offset: 0, color: '#0D7AE8' }, - { offset: 1, color: '#0F5BC7' } - ] - } - } - } - }], - legend: { - show: true, - top: '5%', - left: 'center', - itemWidth: 15, - itemHeight: 3, - textStyle: { - fontSize: 12, - color: '#333' - }, - data: [{ - name: '使用次数', - icon: 'rect', - itemStyle: { - color: '#4B69F1' - } - }] - }, - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow' - }, - formatter: function (params) { - return `${params[0].name}
使用次数: ${params[0].value}`; - } - } - }; - - barChart.setOption(barOption); - - // 响应式调整 - const handleBarResize = () => { - if (barChart && !barChart.isDisposed()) { - barChart.resize(); - } - }; - - window.addEventListener('resize', handleBarResize); - - return () => { - window.removeEventListener('resize', handleBarResize); - if (barChart && !barChart.isDisposed()) { - barChart.dispose(); - } - }; - } - }, []); - - // 维护费用趋势折线图初始化 - useEffect(() => { - if (faultPieChartRef.current) { - const faultPieChart = echarts.init(faultPieChartRef.current); - - const faultPieOption = { - - legend: { - show: true, - top: '5%', - left: 'center', - itemWidth: 20, - itemHeight: 8, - textStyle: { - color: '#333', - fontSize: 12 - } - }, - grid: { - left: '5%', - right: '5%', - bottom: '10%', - top: '20%', - containLabel: true - }, - xAxis: { - type: 'category', - data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], - axisLine: { - lineStyle: { - color: '#E5E5E5' - } - }, - axisTick: { - show: false - }, - axisLabel: { - color: '#666', - fontSize: 12, - interval: 0 - } - }, - yAxis: { - type: 'value', - min: 20000, - max: 30000, - interval: 2000, - axisLine: { - show: false - }, - axisTick: { - show: false - }, - axisLabel: { - color: '#666', - fontSize: 12, - formatter: '¥{value}' - }, - splitLine: { - lineStyle: { - color: '#00001A26', - type: 'dashed' - } - } - }, - series: [{ - name: '费用', - type: 'line', - data: [29000, 21000, 27500, 21900, 26000, 25000, 27000, 24000, 22300, 28000, 29000, 27000], - smooth: false, - symbol: 'circle', - symbolSize: 6, - lineStyle: { - color: '#1269FF', - width: 1 - }, - itemStyle: { - color: '#fff', - borderColor: '#1269FF', - borderWidth: 1 - }, - areaStyle: { - color: { - type: 'linear', - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [{ - offset: 0, - color: 'rgba(18, 105, 255, 0.3)' - }, { - offset: 1, - color: 'rgba(18, 105, 255, 0.05)' - }] - } - } - }] - }; - - faultPieChart.setOption(faultPieOption); - - // 响应式调整 - const handleFaultPieResize = () => { - if (faultPieChart && !faultPieChart.isDisposed()) { - faultPieChart.resize(); - } - }; - - window.addEventListener('resize', handleFaultPieResize); - - return () => { - window.removeEventListener('resize', handleFaultPieResize); - if (faultPieChart && !faultPieChart.isDisposed()) { - faultPieChart.dispose(); - } - }; - } - }, []); - - useEffect(() => { - if (chartRef.current) { - const chart = echarts.init(chartRef.current); - - // 强制初始化时调整大小 - setTimeout(() => { - if (chart && !chart.isDisposed()) { - chart.resize(); - } - }, 100); - - const option = { - color: ['#3C7EFF', '#FF8800', '#FFC403', '#31BCFF'], - legend: { - orient: 'vertical', - right: '2%', - top: 'middle', - itemWidth: 14, - itemHeight: 5, - textStyle: { - fontSize: 10, - color: '#666' - } - }, - tooltip: { - trigger: 'item', - formatter: '{b}
{d}%' - }, - series: [ - { - name: '设备类型占比', - type: 'pie', - radius: '70%', - center: ['40%', '55%'], - avoidLabelOverlap: false, - itemStyle: { - borderRadius: 0, - borderColor: '#fff', - borderWidth: 1 - }, - label: { - show: false, - position: 'center' - }, - emphasis: { - label: { - show: false - } - }, - labelLine: { - show: false - }, - data: [ - { value: 25, name: '灭火器' }, - { value: 30, name: '消防栓' }, - { value: 20, name: '报警器' }, - { value: 25, name: '烟雾探测器' } - ] - } - ] - }; - - chart.setOption(option); - - // 响应式调整 - 使用多种方式监听容器尺寸变化 - let resizeTimer = null; - const handleResize = () => { - // 防抖处理，避免频繁调用resize - if (resizeTimer) { - clearTimeout(resizeTimer); - } - resizeTimer = setTimeout(() => { - if (chart && !chart.isDisposed()) { - chart.resize(); - } - }, 50); // 减少延迟时间 - }; - - // 监听窗口大小变化 - window.addEventListener('resize', handleResize); - - // 监听容器尺寸变化（解决菜单栏伸缩时的自适应问题） - let resizeObserver = null; - if (window.ResizeObserver) { - resizeObserver = new ResizeObserver((entries) => { - for (let entry of entries) { - // 使用requestAnimationFrame确保在下一帧执行 - requestAnimationFrame(() => { - handleResize(); - }); - } - }); - resizeObserver.observe(chartRef.current); - } - - // 额外监听父容器的尺寸变化 - const parentContainer = chartRef.current?.parentElement; - let parentObserver = null; - if (parentContainer && window.ResizeObserver) { - parentObserver = new ResizeObserver((entries) => { - for (let entry of entries) { - requestAnimationFrame(() => { - handleResize(); - }); - } - }); - parentObserver.observe(parentContainer); - } - - // 使用MutationObserver监听DOM结构变化（菜单展开收起时） - const mutationObserver = new MutationObserver((mutations) => { - mutations.forEach((mutation) => { - if (mutation.type === 'attributes' && - (mutation.attributeName === 'class' || mutation.attributeName === 'style')) { - // 延迟执行，确保DOM更新完成 - setTimeout(() => { - handleResize(); - }, 200); - } - }); - }); - - // 监听整个页面的class和style变化 - mutationObserver.observe(document.body, { - attributes: true, - attributeFilter: ['class', 'style'], - subtree: true - }); - - return () => { - window.removeEventListener('resize', handleResize); - if (resizeObserver) { - resizeObserver.disconnect(); - } - if (parentObserver) { - parentObserver.disconnect(); - } - if (mutationObserver) { - mutationObserver.disconnect(); - } - if (resizeTimer) { - clearTimeout(resizeTimer); - } - if (chart && !chart.isDisposed()) { - chart.dispose(); - } - }; - } - }, []); - - // 表格列定义 - const columns = [ - { - title: '编号', - dataIndex: 'id', - key: 'id', - width: 60, - render: (text, record, index) => { - const page = pagination.current || 1; - const pageSize = pagination.pageSize || 8; - const number = (page - 1) * pageSize + index + 1; - return `0${number}`.slice(-2); - } - }, - { - title: '设备编号', - dataIndex: 'deviceId', - key: 'deviceId', - width: 140, - }, - { - title: '设备名称', - dataIndex: 'deviceName', - key: 'deviceName', - width: 110, - }, - { - title: '类型', - dataIndex: 'modelSpec', - key: 'modelSpec', - width: 120, - }, - { - title: '安装位置', - dataIndex: 'installLocation', - key: 'installLocation', - width: 100, - }, - { - title: '状态', - dataIndex: 'status', - key: 'status', - width: 100, - render: (text) => { - const statusMap = { - '报废': { color: '#FF3E48', bg: '#FFE0E2' }, - '待维修': { color: '#FF8800', bg: '#FFF3E9' }, - '已使用': { color: '#00AAFA', bg: '#DAF3FF' }, - '正常': { color: '#44BB5F', bg: '#D8F7DE' } - }; - const status = statusMap[text] || { color: '#333', bg: '#F5F5F5' }; - return ( - - {text} - - ); - } - }, - { - title: '最后维护时间', - dataIndex: 'lastMaintenance', - key: 'lastMaintenance', - width: 150, - }, - { - title: '操作', - key: 'action', - width: 140, - render: (_, record) => ( -
- - -
- ), - }, - ]; - - // 模拟数据 - const mockData = [ - { - key: '1', - id: '001', - deviceId: 'HQ-XF-01-001', - deviceName: '干粉灭火器', - modelSpec: '灭火设备', - installLocation: '1层大厅', - status: '报废', - lastMaintenance: '2025-09-10', - }, - { - key: '2', - id: '002', - deviceId: 'HQ-XF-02-015', - deviceName: '室内消火栓', - modelSpec: '灭火设备', - installLocation: '3层东区', - status: '已使用', - lastMaintenance: '2025-09-10', - }, - { - key: '3', - id: '003', - deviceId: 'HQ-XF-03-007', - deviceName: '火警报警器', - modelSpec: '报警设备', - installLocation: '地下一层', - status: '正常', - lastMaintenance: '2025-09-10', - }, - { - key: '4', - id: '004', - deviceId: 'HQ-XF-03-008', - deviceName: '火警报警器', - modelSpec: '报警设备', - installLocation: '地下一层', - status: '待维修', - lastMaintenance: '2025-09-10', - }, - { - key: '5', - id: '005', - deviceId: 'HQ-XF-01-009', - deviceName: '干粉灭火器', - modelSpec: '灭火设备', - installLocation: '地下一层', - status: '报废', - lastMaintenance: '2025-09-10', - }, - { - key: '6', - id: '006', - deviceId: 'HQ-XF-01-010', - deviceName: '室内消火栓', - modelSpec: '灭火设备', - installLocation: '地下一层', - status: '已使用', - lastMaintenance: '2025-09-10', - }, - { - key: '7', - id: '007', - deviceId: 'HQ-XF-01-011', - deviceName: '火警报警器', - modelSpec: '报警设备', - installLocation: '地下一层', - status: '待维修', - lastMaintenance: '2025-09-10', - }, - { - key: '8', - id: '008', - deviceId: 'HQ-XF-01-012', - deviceName: '火警报警器', - modelSpec: '报警设备', - installLocation: '地下一层', - status: '正常', - lastMaintenance: '2025-09-10', - }, - { - key: '9', - id: '009', - deviceId: 'HQ-XF-01-013', - deviceName: '干粉灭火器', - modelSpec: '灭火设备', - installLocation: '地下一层', - status: '已使用', - lastMaintenance: '2025-09-10', - }, - { - key: '10', - id: '010', - deviceId: 'HQ-XF-01-014', - deviceName: '室内消火栓', - modelSpec: '灭火设备', - installLocation: '地下一层', - status: '待维修', - lastMaintenance: '2025-09-10', - }, - { - key: '11', - id: '011', - deviceId: 'HQ-XF-01-015', - deviceName: '火警报警器', - modelSpec: '报警设备', - installLocation: '地下一层', - status: '正常', - lastMaintenance: '2025-09-10', - }, - { - key: '12', - id: '012', - deviceId: 'HQ-XF-01-016', - deviceName: '火警报警器', - modelSpec: '报警设备', - installLocation: '地下一层', - status: '已使用', - lastMaintenance: '2025-09-10', - }, - { - key: '13', - id: '013', - deviceId: 'HQ-XF-01-017', - deviceName: '干粉灭火器', - modelSpec: '灭火设备', - installLocation: '2层西区', - status: '报废', - lastMaintenance: '2024-08-15', - }, - { - key: '14', - id: '014', - deviceId: 'HQ-XF-02-018', - deviceName: '室内消火栓', - modelSpec: '灭火设备', - installLocation: '4层南区', - status: '报废', - lastMaintenance: '2024-07-20', - }, - { - key: '15', - id: '015', - deviceId: 'HQ-XF-03-019', - deviceName: '火警报警器', - modelSpec: '报警设备', - installLocation: '地下二层', - status: '报废', - lastMaintenance: '2024-06-10', - }, - { - key: '16', - id: '016', - deviceId: 'HQ-XF-01-020', - deviceName: '干粉灭火器', - modelSpec: '灭火设备', - installLocation: '5层北区', - status: '报废', - lastMaintenance: '2024-05-05', - }, - ]; - - // 初始化数据 - useEffect(() => { - setPagination(prev => ({ ...prev, total: mockData.length })); - }, []); - - // 根据分页获取当前页数据 - const getCurrentPageData = () => { - const { current, pageSize } = pagination; - const startIndex = (current - 1) * pageSize; - const endIndex = startIndex + pageSize; - return mockData.slice(startIndex, endIndex); - }; - - // 表格选择变化 - const onSelectChange = (newSelectedRowKeys, newSelectedRows) => { - setSelectedRowKeys(newSelectedRowKeys); - setSelectedRows(newSelectedRows); - }; - - // 新增设备按钮点击事件 - const handleAddDevice = () => { - console.log('新增设备'); - // TODO: 实现新增设备逻辑 - }; - - // 导出数据按钮点击事件 - const handleExportData = () => { - console.log('导出数据'); - // TODO: 实现导出数据逻辑 - }; - - // 分页变化处理 - const handleTableChange = (pagination) => { - setPagination(prev => ({ - ...prev, - current: pagination.current, - pageSize: pagination.pageSize, - })); - }; - - // 搜索处理 - const handleSearchChange = (e) => { - setSearchText(e.target.value); - console.log('搜索:', e.target.value); - // TODO: 实现搜索逻辑，根据设备名称、编号等筛选数据 - }; - - return ( -
- {/* 第1个div - 高度39% */} -
-
-
-
-
-
- 设备使用频率分析 -
-
- {/* 设备状态饼图 */} -
-
-
- -
-
-
-
- 近一年维护费用趋势 -
-
- - {/* 维护费用趋势折线图 */} -
-
-
- -
-
-
-
-
设备类型占比
-
-
-
-
-
-
-
- - {/* 第2个div - 占满剩余位置 */} -
-
-
-
-
-
-
-
近期维护提醒
-
-
-
-
-
SH-MHQ-023-C 干粉灭火器
-
位置: 4楼办公区丨维护类型: 季度检查
-
负责人: 张三
-
-
-
3天后到期
-
-
-
-
-
SH-XHS-045-D 室内消火栓
-
位置: 2楼东侧走廊丨维护类型: 水压测试
-
负责人: 李四
-
-
-
8天后到期
-
-
-
-
-
-
-
-
维护任务进度
-
-
- {/* 进度条区域 */} -
- -
月度维护计划
- - -
季度维护计划
- - - -
年度维护计划
- - - - {/* 警告提示框 */} -
- - 本月有5项维护任务即将到期 -
- -
-
-
-
-
- -
- {/* 表格 */} -
-
-
-
消防设施与器材列表
-
-
- - - {/* 操作按钮 */} -
-
- } - /> -
-
- - -
-
- - {/* 表格 */} -
- - `共 ${total} 条`, - }} - /> -
-
-
-
-
- ); -}; - -export default EvaluationReport; diff --git a/src/pages/business_basic/components/EvaluationReport.less b/src/pages/business_basic/components/EvaluationReport.less deleted file mode 100644 index e62182a..0000000 --- a/src/pages/business_basic/components/EvaluationReport.less +++ /dev/null @@ -1,558 +0,0 @@ -.Econtainer { - padding: 8px 6px 0px 6px; - height: 100%; - display: flex; - flex-direction: column; - gap: 10px; - - // 第二个div - 高度35% - .EcontainerMiddle { - // height: 400px; - min-height: 35%; - border-radius: 4px; - display: flex; - flex-direction: column; - - .sectionContent { - height: 100%; - display: flex; - display: flex; - gap: 10px; - height: 100%; - - .middleBlock1 { - width: 30%; - height: 100%; - background: #fff; - border: 2px solid #fff; - position: relative; - padding: 0px 10px 10px 2px; - font-family: PingFang SC; - font-size: 14px; - color: #333333; - - .block1Header { - position: absolute; - top: 5px; - left: 10px; - right: 10px; - display: flex; - justify-content: space-between; - align-items: center; - z-index: 10; - - .block1Title { - display: flex; - align-items: center; - gap: 8px; - font-weight: 500; - font-size: 14px; - margin-top: 5px; - color: #333333; - - .titleIcon { - width: 3px; - height: 14px; - background-color: #2E4CD4; - } - } - - } - - .deviceStatusChart { - position: absolute; - top: 10px; - left: 10px; - right: 10px; - z-index: 10; - min-height: 100%; - } - } - - .middleBlock12 { - flex: 1; - height: 100%; - background-color: #fff; - display: flex; - flex-direction: column; - font-family: PingFang SC; - font-size: 14px; - color: #333333; - padding: 5px 10px 5px 10px; - position: relative; - - .block1Header { - position: absolute; - top: 5px; - left: 10px; - right: 10px; - display: flex; - justify-content: space-between; - align-items: center; - z-index: 10; - - .block1Title { - display: flex; - align-items: center; - gap: 8px; - font-weight: 500; - font-size: 14px; - margin-top: 5px; - color: #333333; - - .titleIcon { - width: 3px; - height: 14px; - background-color: #2E4CD4; - } - } - - } - - .deviceStatusChart { - position: absolute; - top: 10px; - left: 10px; - right: 10px; - // bottom: 10px; - z-index: 10; - } - } - - .middleBlock12 { - width: 45%; - height: 100%; - background-color: #fff; - display: flex; - flex-direction: column; - font-family: PingFang SC; - font-size: 14px; - color: #333333; - padding: 5px 10px 5px 10px; - position: relative; - - .block1Header { - position: absolute; - top: 5px; - left: 10px; - right: 10px; - display: flex; - justify-content: space-between; - align-items: center; - z-index: 10; - - .block1Title { - display: flex; - align-items: center; - gap: 8px; - font-weight: 500; - font-size: 14px; - color: #333333; - - .titleIcon { - width: 3px; - height: 14px; - background-color: #2E4CD4; - } - } - } - - .deviceStatusChart { - position: absolute; - top: 10px; - left: 10px; - right: 10px; - // bottom: 10px; - min-height: 100%; - z-index: 10; - } - } - - .middleBlock2 { - // flex: 1; - width: calc(100% - 75% - 15px); - height: 100%; - // background: linear-gradient(170.5deg, #EBEFF4 6.87%, #FFFFFF 53.01%); - // border: 2px solid #fff; - background-color: #fff; - // border-radius: 4px; - display: flex; - flex-direction: column; - font-family: PingFang SC; - font-size: 14px; - color: #333333; - padding: 5px 10px 5px 10px; - - .middleBlock2Title { - display: flex; - justify-content: space-between; - align-items: center; - margin-top: 5px; - - .titleLeft { - display: flex; - align-items: center; - gap: 8px; - font-weight: 500; - font-size: 14px; - color: #333333; - - .titleIcon { - width: 3px; - height: 14px; - background-color: #2E4CD4; - } - } - - } - - .middleBlock2Chart { - width: 100%; - height: 100%; - } - } - } - } - - // 第三个div - 占满剩余位置 - .EcontainerBottom { - display: flex; - flex-direction: column; - flex-shrink: 0; - - .sectionContent { - display: flex; - flex-direction: row; - flex: 1; - gap: 10px; - padding: 0; - - .leftBlock { - width: 30%; - flex-shrink: 0; - height: 100%; - padding: 0; - display: flex; - flex-direction: column; - gap: 10px; - - .leftBlockTitle { - display: flex; - align-items: center; - gap: 8px; - font-family: PingFang SC; - font-weight: 500; - font-size: 14px; - color: #333333; - margin-bottom: 10px; - - .titleIcon { - width: 3px; - height: 16px; - background-color: #2E4CD4; - } - } - - .maintenanceStack { - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - gap: 10px; - - .maintenanceSection { - width: 100%; - height: 50%; - background: #FFF; - border-radius: 4px; - display: flex; - flex-direction: column; - padding: 12px 14px; - - .maintenanceTitle { - display: flex; - align-items: center; - gap: 8px; - font-family: PingFang SC; - font-weight: 500; - font-size: 14px; - color: #333333; - margin-bottom: 8px; - } - - .titleIcon { - width: 3px; - height: 16px; - background-color: #2E4CD4; - } - - .maintenanceContent { - flex: 1; - width: 100%; - } - - .maintenanceContent1 { - flex: 1; - width: 100%; - display: flex; - flex-direction: column; - gap: 8px; - margin-top: 8px; - .maintenanceItem { - display: flex; - align-items: center; - justify-content: space-between; - background-color: #F1F7FF; - border-radius: 4px; - padding: 16px 16px; - - .maintenanceLeft { - flex: 1; - display: flex; - flex-direction: column; - gap: 4px; - - .maintenanceText1 { - font-size: 14px; - font-weight: 500; - color: #333333; - font-family: PingFang SC; - } - - .maintenanceText2 { - font-size: 12px; - color: #666666; - font-family: PingFang SC; - } - - .maintenanceText3 { - font-size: 12px; - color: #666666; - font-family: PingFang SC; - } - } - - .maintenanceRight { - flex: 0 0 auto; - display: flex; - align-items: center; - justify-content: center; - - .maintenanceStatus { - font-size: 12px; - color: #FF3E48; - font-weight: 500; - font-family: PingFang SC; - background-color: #FFE0E2; - padding: 4px 8px; - border-radius: 4px; - // border: 1px solid #FFE0E2; - } - } - - .maintenanceRight2 { - flex: 0 0 auto; - display: flex; - align-items: center; - justify-content: center; - - .maintenanceStatus { - font-size: 12px; - color: #FF8800; - font-weight: 500; - font-family: PingFang SC; - background-color: #FFF3E9; - padding: 4px 8px; - border-radius: 4px; - // padding-right: 2px; - } - } - } - } - - .maintenanceContent2 { - flex: 1; - width: 100%; - display: flex; - flex-direction: column; - gap: 15px; - padding: 8px 0; - - .warningBox { - display: flex; - align-items: center; - gap: 8px; - background-color: #FFF3CD; - border: 1px solid #F4E3AE; - border-radius: 4px; - padding: 8px 12px; - // margin-bottom: 8px; - // margin-top: 10px; - - .warningIcon { - color: #8C6C0B; - font-size: 14px; - } - - .warningText { - color: #8C6C0B; - font-size: 12px; - font-family: PingFang SC; - font-weight: 400; - } - } - - .progressSection { - width: 100%; - display: flex; - flex-direction: column; - // gap: 12px; - padding: 0px 12px 12px 12px; - - - .progressLabel { - font-size: 12px; - color: #666666; - font-family: PingFang SC; - font-weight: 400; - - } - - // 自定义进度条样式 - :global(.ant-progress) { - .ant-progress-bg { - background: linear-gradient(90deg, #2E4CD4 0%, #4B69F1 100%); - } - - .ant-progress-text { - color: #2E4CD4; - font-weight: 500; - } - } - - } - } - } - } - } - - .rightBlock { - width: calc(100% - 28% - 10px); - height: 100%; - background-color: #fff; - padding: 0; - display: flex; - flex-direction: column; - - .tableHeader { - display: flex; - justify-content: space-between; - align-items: center; - padding: 11px 15px 5px 15px; - - .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; - justify-content: space-between; - align-items: center; - gap: 8px; - margin-top: 5px; - padding: 0px 15px; - - .leftActions { - display: flex; - align-items: center; - } - - .rightActions { - display: flex; - gap: 8px; - align-items: center; - } - - .actionButton { - display: flex; - align-items: center; - gap: 4px; - height: 28px; - border: 1px solid #DFE4F6; - border-radius: 4px; - color: #2E4CD4; - font-weight: 500; - font-size: 12px; - padding: 0px 8px; - background: transparent; - cursor: pointer; - transition: all 0.2s ease; - - &:hover { - background-color: #f0f2ff; - border-color: #2E4CD4; - } - - &:active { - background-color: #e6ebff; - } - - .buttonIcon { - font-size: 14px; - font-weight: bold; - } - } - } - - .tableContainer { - flex: 1; - overflow: hidden; - margin: 10px 15px 0 15px; // 上边距10px，左右边距15px - - :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; - color: #666666; - } - - :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_basic/components/LicenseManagement.js b/src/pages/business_basic/components/LicenseManagement.js deleted file mode 100644 index 44bd7a5..0000000 --- a/src/pages/business_basic/components/LicenseManagement.js +++ /dev/null @@ -1,604 +0,0 @@ -import React, { useEffect, useRef, useState } from 'react'; -import { Card, Table, Tag, Space, Typography, Progress, Row, Col, Button, Input, Select } from 'antd'; -import * as echarts from 'echarts'; -import StandardTable from '@/components/StandardTable'; -import styles from './LicenseManagement.less'; -import icon_echart from '@/assets/business_basic/icon_echart.svg'; - -const { Title } = Typography; -const { Search } = Input; -const { Option } = Select; - -const LicenseManagement = () => { - const chartRef = useRef(null); - const [searchValue, setSearchValue] = useState(''); - const [selectedType, setSelectedType] = useState('all'); - - // 图表数据 - const chartData = [ - { name: '安全生产许可证', value: 35, itemStyle: { color: '#3C7DFF' } }, - { name: '安全评估报告', value: 25, itemStyle: { color: '#FF8800' } }, - { name: '安全三同时材料', value: 20, itemStyle: { color: '#FF3E48' } }, - { name: '施工资质证书', value: 15, itemStyle: { color: '#FFC403' } }, - { name: '应急预案', value: 10, itemStyle: { color: '#22C55E' } }, - { name: '其他', value: 5, itemStyle: { color: '#31BCFF' } } - ]; - - // 初始化图表 - useEffect(() => { - if (chartRef.current) { - const chart = echarts.init(chartRef.current); - - const option = { - tooltip: { - trigger: 'item', - formatter: '{a}
{b}: {c} ({d}%)' - }, - legend: { - orient: 'horizontal', - bottom: 0, - left: 'center', - itemWidth: 14, - itemHeight: 4, - itemGap: 10, - textStyle: { - fontSize: 12, - color: '#333', - width: 100 - }, - formatter: function (name) { - return name; - }, - data: (() => { - // 找到最长的名称长度 - const maxLength = Math.max(...chartData.map(item => item.name.length)); - // 将所有名称填充到相同长度 - return chartData.map(item => { - const paddingLength = maxLength - item.name.length; - return item.name + '　'.repeat(paddingLength); - }); - })() - }, - series: [ - { - name: '证件类型分布', - type: 'pie', - radius: ['20%', '65%'], - center: ['50%', '38%'], - avoidLabelOverlap: false, - itemStyle: { - borderRadius: 5, - // color:"red",/ - borderColor: '#fff', - borderWidth: 2 - }, - label: { - show: false, - position: 'center' - }, - emphasis: { - label: { - show: true, - fontSize: '16', - fontWeight: 'bold' - } - }, - labelLine: { - show: false - }, - data: (() => { - // 找到最长的名称长度 - const maxLength = Math.max(...chartData.map(item => item.name.length)); - // 将所有名称填充到相同长度 - return chartData.map(item => ({ - ...item, - name: item.name + '　'.repeat(maxLength - item.name.length) - })); - })() - } - ] - }; - - chart.setOption(option); - - // 响应式处理 - const handleResize = () => { - chart.resize(); - }; - window.addEventListener('resize', handleResize); - - return () => { - window.removeEventListener('resize', handleResize); - chart.dispose(); - }; - } - }, []); - - // 表格数据 - const tableData = [ - { - key: '1', - no: '01', - name: '安全生产许可证', - type: '资质证书', - id: 'HQ-XF-01-001', - authority: '应急管理部', - validUntil: '2025-09-10', - status: '已过期', - statusType: 'error' - }, - { - key: '2', - no: '02', - name: '安全预评估报告', - type: '安全三同时', - id: 'HQ-XF-02-015', - authority: '第三方评估机构', - validUntil: '2025-09-10', - status: '有效', - statusType: 'warning' - }, - { - key: '3', - no: '03', - name: '施工资质证书', - type: '资质证书', - id: 'HQ-XF-03-007', - authority: '3设计院', - validUntil: '2025-09-10', - status: '有效', - statusType: 'success' - }, - { - key: '4', - no: '04', - name: '安全标准化证书', - type: '资质证书', - id: 'HQ-XF-03-007', - authority: '第三方评估机构', - validUntil: '2025-09-10', - status: '有效', - statusType: 'success' - }, - { - key: '5', - no: '05', - name: '消防验收合格证', - type: '消防证书', - id: 'HQ-XF-05-012', - authority: '消防局', - validUntil: '2026-03-15', - status: '有效', - statusType: 'success' - }, - { - key: '6', - no: '06', - name: '职业健康安全管理体系认证', - type: '管理体系认证', - id: 'HQ-XF-06-008', - authority: '认证机构', - validUntil: '2026-06-20', - status: '有效', - statusType: 'success' - }, - { - key: '7', - no: '07', - name: '环境管理体系认证', - type: '管理体系认证', - id: 'HQ-XF-07-009', - authority: '认证机构', - validUntil: '2026-08-25', - status: '有效', - statusType: 'success' - }, - { - key: '8', - no: '08', - name: '特种设备使用登记证', - type: '特种设备证书', - id: 'HQ-XF-08-011', - authority: '质量技术监督局', - validUntil: '2026-12-10', - status: '有效', - statusType: 'success' - }, - { - key: '9', - no: '09', - name: '危险化学品经营许可证', - type: '经营许可证', - id: 'HQ-XF-09-013', - authority: '应急管理局', - validUntil: '2027-01-30', - status: '有效', - statusType: 'success' - }, - { - key: '10', - no: '10', - name: '辐射安全许可证', - type: '辐射安全证书', - id: 'HQ-XF-10-014', - authority: '生态环境部', - validUntil: '2027-04-18', - status: '有效', - statusType: 'success' - } - ]; - - // 表格列定义 - const columns = [ - { - title: '编号', - dataIndex: 'no', - key: 'no', - width: 80, - }, - { - title: '证照名称', - dataIndex: 'name', - key: 'name', - width: 150, - }, - { - title: '类型', - dataIndex: 'type', - key: 'type', - width: 120, - }, - { - title: '编号', - dataIndex: 'id', - key: 'id', - width: 150, - }, - { - title: '发证机关', - dataIndex: 'authority', - key: 'authority', - width: 150, - }, - { - title: '有效期至', - dataIndex: 'validUntil', - key: 'validUntil', - width: 120, - }, - { - title: '状态', - dataIndex: 'status', - key: 'status', - width: 120, - render: (text, record) => { - const getStatusStyle = (status) => { - if (status === '有效') { - return { - color: '#44BB5F', - backgroundColor: '#D8F7DE', - padding: '4px 8px', - borderRadius: '4px', - fontSize: '12px', - display: 'inline-block' - }; - } else if (status === '即将到期') { - return { - color: '#FF8800', - backgroundColor: '#FFF3E9', - padding: '4px 8px', - borderRadius: '4px', - fontSize: '12px', - display: 'inline-block' - }; - } else if (status === '已过期') { - return { - color: '#FF3E48', - backgroundColor: '#FFE0E2', - padding: '4px 8px', - borderRadius: '4px', - fontSize: '12px', - display: 'inline-block' - }; - } - return {}; - }; - - return ( - - {text} - - ); - } - }, - { - title: '操作', - dataIndex: 'action', - key: 'action', - width: 120, - render: (text, record) => { - const handleEdit = (record) => { - console.log('编辑记录:', record); - }; - - const handleDelete = (record) => { - console.log('删除记录:', record); - }; - - return ( -
- - -
- ); - } - }, - ]; - - - return ( -
-
- -
-
-
- 证件类型分布 -
-
-
-
-
- -
-
-
- 证件状态概览 -
-
- {/* 上半部分：进度条和百分比 */} -
-
-
有效证照
-
- - 50% -
-
- -
-
即将到期
-
- - 15% -
-
- -
-
已过期
-
- - 20% -
-
- -
-
待审核材料
-
- - 15% -
-
-
- - {/* 下半部分：数字统计 */} -
- -
-
-
42
-
总证照数
-
- - -
-
8
-
即将过期
-
- - -
-
6
-
已过期
-
- - -
-
6
-
待审核材料
-
- - - - - - - -
-
-
- 临期预警 -
-
- {/* 透明块容器 */} -
- {/* 四个垂直分布的卡片 */} -
-
-
安全生产许可证
-
编号: AQXK-2023-0582
-
-
- 15天后到期 -
-
- -
-
-
安全评估报告
-
编号: AQPG-2023-0125
-
-
- 30天后到期 -
-
- -
-
-
施工资质证书
-
编号: SGZZ-2023-0089
-
-
- 7天后到期 -
-
- -
-
-
应急预案
-
编号: YJYA-2023-0045
-
-
- 4天后到期 -
-
-
-
-
- - - - - {/* 证照列表区域 */} -
-
-
-
- 证照列表 -
-
- setSearchValue(e.target.value)} - onSearch={(value) => console.log('搜索:', value)} - className={styles.searchInput} - /> - - -
-
- { }} // ======== 行选择事件处理函数 ======== - onChange={() => { }} // ======== 表格变化事件处理函数 ======== - pagination={{ - currentPage: 1, - pageSize: 5, - total: tableData.length, - showSizeChanger: false, - showQuickJumper: true, - showTotal: (total, range) => - `共 ${total} 条`, - locale: { - jump_to: '前往', - page: '页', - items_per_page: '条/页', - } - }} - /> -
- - ); -}; - -export default LicenseManagement; diff --git a/src/pages/business_basic/components/LicenseManagement.less b/src/pages/business_basic/components/LicenseManagement.less deleted file mode 100644 index 560fa0e..0000000 --- a/src/pages/business_basic/components/LicenseManagement.less +++ /dev/null @@ -1,498 +0,0 @@ -.licenseManagementContainer { - height: 90vh; - - .topSectionContainer { - padding: 0; - margin: 15px 0px 15px 5px; - height: 40%; - display: flex; - gap: 15px; - align-items: stretch; - - .firstBlock { - width: 30%; - background-color: #fff; - display: flex; - flex-direction: column; - padding: 10px 16px; - border-radius: 2px; - - .chartHeader { - display: flex; - align-items: center; - margin-bottom: 16px; - - .colorBlock { - width: 2px; - height: 18px; - background-color: #2E4CD4; - margin-right: 8px; - border-radius: 1px; - } - - .chartTitle { - font-size: 14px; - font-weight: 500; - color: #333333; - line-height: 18px; - } - } - - .chartContainer { - flex: 1; - width: 100%; - position: relative; - - .chart { - width: 100%; - height: 100%; - min-height: 200px; - } - - // 进度条区域样式 - .progressSection { - margin-bottom: 20px; - - .progressItem { - margin-bottom: 16px; - - .progressLabel { - font-size: 12px; - color: #666; - margin-bottom: 8px; - font-weight: 400; - } - - .progressWrapper { - display: flex; - align-items: center; - gap: 12px; - - .customProgress { - flex: 1; - - :global(.ant-progress-bg) { - height: 8px !important; - border-radius: 4px; - } - - :global(.ant-progress-outer) { - .ant-progress-inner { - background-color: #F0F0F0; - border-radius: 4px; - } - } - } - - .progressPercent { - font-size: 12px; - color: #333; - font-weight: 500; - min-width: 30px; - text-align: right; - } - } - } - } - - // 数字统计区域样式 - .statsSection { - .statItem { - text-align: center; - padding: 8px; - - .statNumber { - font-size: 24px; - font-weight: 600; - line-height: 1.2; - margin-bottom: 4px; - } - - .statLabel { - font-size: 12px; - color: #666; - font-weight: 400; - } - } - } - } - } - - .secondBlock { - width: 30%; - background-color: #fff; - display: flex; - flex-direction: column; - padding: 10px 16px; - border-radius: 2px; - - .chartHeader { - display: flex; - align-items: center; - margin-bottom: 8px; - - .colorBlock { - width: 2px; - height: 18px; - background-color: #2E4CD4; - margin-right: 8px; - border-radius: 1px; - } - - .chartTitle { - font-size: 14px; - font-weight: 500; - color: #333333; - // line-height: 18px; - } - } - - .chartContainer { - flex: 1; - width: 100%; - position: relative; - - // 进度条区域样式 - .progressSection { - // margin-bottom: 20px; - - .progressItem { - // margin-bottom: 16px; - - .progressLabel { - font-size: 10px; - color: #666; - // margin-bottom: 8px; - font-weight: 400; - } - - .progressWrapper { - display: flex; - align-items: center; - gap: 5px; - - .customProgress { - flex: 1; - - :global(.ant-progress-bg) { - height: 8px !important; - border-radius: 4px; - } - - :global(.ant-progress-outer) { - .ant-progress-inner { - background-color: #F0F0F0; - border-radius: 4px; - } - } - } - - .progressPercent { - font-size: 12px; - color: #333; - font-weight: 500; - min-width: 30px; - text-align: right; - } - } - } - } - - // 数字统计区域样式 - .statsSection { - .statItem { - text-align: center; - padding: 0px 2px 2px 2px; - - .statNumber { - font-size: 22px; - font-weight: 600; - line-height: 1.2; - margin-bottom: 4px; - } - - .statLabel { - font-size: 12px; - color: #666; - font-weight: 400; - } - } - } - } - } - - .thirdBlock { - flex: 1; - background-image: url('@/assets/business_basic/background_lqyj.svg'); - background-color: #fff; - background-repeat: no-repeat; - background-size: cover; - background-position: center; - display: flex; - flex-direction: column; - padding: 10px 16px; - border-radius: 2px; - - .chartHeader { - display: flex; - align-items: center; - margin-bottom: 8px; - - .colorBlock { - width: 2px; - height: 18px; - background-color: #2E4CD4; - margin-right: 8px; - border-radius: 1px; - } - - .chartTitle { - font-size: 14px; - font-weight: 500; - color: #333333; - } - } - - .chartContainer { - flex: 1; - width: 100%; - position: relative; - - // 透明块容器样式 - .transparentBlock { - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - gap: 8px; - padding: 4px 8px; - - .licenseCard { - width: 60%; - height: auto; - background-color: #FFF9F4; - border: 1px solid #FFD7BB; - border-radius: 2px; - padding: 5px 8px; - display: flex; - justify-content: space-between; - align-items: center; - // box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); - - .cardContent { - flex: 1; - display: flex; - flex-direction: column; - gap: 4px; - - .licenseName { - font-size: 12px; - font-weight: 500; - color: #333; - line-height: 1.2; - } - - .licenseNumber { - font-size: 12px; - color: #666; - font-weight: 400; - } - } - - .expiryTag { - width: 38%; - background-color: #FFEDDE; - border-radius: 2px; - padding: 5px 12px; - margin-left: 12px; - - - .expiryText { - font-size: 12px; - font-weight: 500; - display: flex; - align-items: center; - color: #D46B08; - } - } - } - } - } - } - } - - - .listCard { - padding: 0; - padding: 15px 5px 15px 20px; - flex: 1; - // display: flex; - gap: 15px; - background-color: #fff; - // align-items: stretch; - - .chartHeader { - display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: 16px; - - .headerLeft { - display: flex; - align-items: center; - - .colorBlock { - width: 2px; - height: 18px; - background-color: #2E4CD4; - margin-right: 8px; - border-radius: 1px; - } - - .chartTitle { - font-size: 14px; - font-weight: 500; - color: #333333; - line-height: 18px; - } - } - - .headerRight { - display: flex; - align-items: center; - gap: 12px; - - .searchInput { - width: 280px; - - .ant-input { - border-radius: 2px; - border: 1px solid #d9d9d9; - - &:hover { - border-color: #40a9ff; - } - - &:focus { - border-color: #40a9ff; - box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2); - } - } - } - - .typeSelector { - width: 120px; - - .ant-select-selector { - border-radius: 2px; - border: 1px solid #d9d9d9; - - &:hover { - border-color: #40a9ff; - } - } - - &.ant-select-focused .ant-select-selector { - border-color: #40a9ff; - box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2); - } - } - - .addButton { - border-radius: 4px; - background-color: #2E4CD4; - // border-color: #1890ff; - height: 32px; - padding: 4px 15px; - font-size: 14px; - display: flex; - align-items: center; - justify-content: center; - - &:hover { - background-color: #2E4CD4; - // border-color: #40a9ff; - } - - &:focus { - background-color: #2E4CD4; - // border-color: #40a9ff; - } - } - } - } - - // StandardTable 组件样式 - :global(.ant-table) { - font-size: 12px; - } - :global(.ant-pagination-options-quick-jumper input) { - text-align: center !important; - } - - :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; - color: #666666; - } - - :global(.ant-pagination) { - margin-top: 16px; - text-align: right; - } - } -} - -// 覆盖Ant Design默认样式 -.licenseManagementContainer { - .ant-card { - box-shadow: none; - } - - .ant-card-body { - padding: 20px; - } - - .ant-table { - font-size: 14px; - } - - .ant-tag { - border-radius: 4px; - font-size: 12px; - padding: 2px 8px; - } - - .ant-btn-link { - padding: 0; - height: auto; - font-size: 14px; - } - - .ant-input-search { - .ant-input { - border-radius: 6px; - } - } - - .ant-select { - .ant-select-selector { - border-radius: 6px; - } - } - - .ant-btn-primary { - border-radius: 6px; - } -} \ No newline at end of file diff --git a/src/pages/business_basic/components/OilDataManagement.js b/src/pages/business_basic/components/OilDataManagement.js new file mode 100644 index 0000000..439fb5d --- /dev/null +++ b/src/pages/business_basic/components/OilDataManagement.js @@ -0,0 +1,122 @@ +import React from 'react'; +import { Card, Table, Input, Button, Space } from 'antd'; +import { PlusOutlined, SearchOutlined } from '@ant-design/icons'; +import styles from './OilDataManagement.less'; + +const OilDataManagement = () => { + const onSearch = (value) => { + console.log('搜索内容:', value); + }; + + const columns = [ + { + title: '编号', + dataIndex: 'id', + key: 'id', + width: 80, + }, + { + title: '油品名称', + dataIndex: 'oilName', + key: 'oilName', + width: 120, + }, + { + title: '油品类型', + dataIndex: 'oilType', + key: 'oilType', + width: 120, + }, + { + title: '规格', + dataIndex: 'specification', + key: 'specification', + width: 100, + }, + { + title: '库存量', + dataIndex: 'stock', + key: 'stock', + width: 100, + }, + { + title: '单位', + dataIndex: 'unit', + key: 'unit', + width: 80, + }, + { + title: '创建时间', + dataIndex: 'createTime', + key: 'createTime', + width: 180, + }, + { + title: '操作', + dataIndex: 'action', + key: 'action', + width: 150, + render: (text, record) => ( + + + + + ), + }, + ]; + + const tableData = [ + { + key: '1', + id: '001', + oilName: '92号汽油', + oilType: '汽油', + specification: '92#', + stock: '5000', + unit: '升', + createTime: '2024-12-20 10:00:00', + }, + { + key: '2', + id: '002', + oilName: '95号汽油', + oilType: '汽油', + specification: '95#', + stock: '3000', + unit: '升', + createTime: '2024-12-20 10:00:00', + }, + ]; + + return ( +
+ +
+
油资料管理
+ + } + /> + + +
+
`共 ${total} 条`, + }} + /> + + + ); +}; + +export default OilDataManagement; + diff --git a/src/pages/business_basic/components/OilDataManagement.less b/src/pages/business_basic/components/OilDataManagement.less new file mode 100644 index 0000000..6b1387b --- /dev/null +++ b/src/pages/business_basic/components/OilDataManagement.less @@ -0,0 +1,19 @@ +.container { + padding: 20px; + background: #f5f5f5; + min-height: 100%; + + .header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20px; + + .title { + font-size: 18px; + font-weight: 600; + color: #333; + } + } +} + diff --git a/src/pages/business_basic/components/OnlineMonitoring.js b/src/pages/business_basic/components/OnlineMonitoring.js deleted file mode 100644 index 3e4b6b5..0000000 --- a/src/pages/business_basic/components/OnlineMonitoring.js +++ /dev/null @@ -1,716 +0,0 @@ - -import React, { useEffect, useRef, useState } from 'react'; -import { Card, Result, Select, Button } from 'antd'; -import * as echarts from 'echarts'; -import StandardTable from '@/components/StandardTable'; -import styles from './OnlineMonitoring.less'; - -import alarm0 from '@/assets/safe_majorHazard/online_monitoring/alarm0.png'; -import alarm1 from '@/assets/safe_majorHazard/online_monitoring/alarm1.png'; -import alarm2 from '@/assets/safe_majorHazard/online_monitoring/alarm2.png'; -import alarm3 from '@/assets/safe_majorHazard/online_monitoring/alarm3.png'; -import exportIcon from '@/assets/safe_majorHazard/online_monitoring/export.png'; -import deleteIcon from '@/assets/safe_majorHazard/online_monitoring/delete.png'; - -const OnlineMonitoring = () => { - const chartRef = useRef(null); - const [selectedRowKeys, setSelectedRowKeys] = useState([]); - const [selectedRows, setSelectedRows] = useState([]); - const [loading, setLoading] = useState(false); - const [dataSource, setDataSource] = useState([]); - const [pagination, setPagination] = useState({ - current: 1, - pageSize: 5, - total: 0, - }); - - useEffect(() => { - if (chartRef.current) { - const chart = echarts.init(chartRef.current); - - const option = { - color: ['#04A7F3', '#E7C42C', '#EC6941'], - - legend: { - data: ['液位', '温度', '压力'], - top: "-3px", - left: "center", - itemGap: 40, // 图例间距 - textStyle: { - fontSize: 10 - } - }, - grid: { - left: '2%', - right: '4%', - bottom: '2%', - top: '12%', - containLabel: true - }, - xAxis: { - type: 'category', - boundaryGap: false, - data: ['0:00', '2:00', '4:00', '6:00', '8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00'], - axisLabel: { - fontSize: 10 - } - }, - yAxis: { - type: 'value', - min: 0, - max: 500, - axisLabel: { - formatter: '{value}', - fontSize: 10 - } - }, - series: [ - { - name: '液位', - type: 'line', - smooth: true, - lineStyle: { - width: 1.5, - color: '#04A7F3' - }, - areaStyle: { - color: { - type: 'linear', - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [ - { offset: 0, color: 'rgba(4, 167, 243, 0.3)' }, - { offset: 1, color: 'rgba(4, 167, 243, 0)' } - ] - } - }, - symbol: 'none', // 不显示数据点 - data: [120, 200, 150, 300, 250, 400, 350, 280, 320, 180, 220, 160, 140] - }, - { - name: '温度', - type: 'line', - smooth: true, - lineStyle: { - width: 1.5, - color: '#E7C42C' - }, - areaStyle: { - color: { - type: 'linear', - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [ - { offset: 0, color: 'rgba(231, 196, 44, 0.3)' }, - { offset: 1, color: 'rgba(231, 196, 44, 0)' } - ] - } - }, - symbol: 'none', - data: [80, 120, 100, 180, 160, 220, 200, 150, 170, 90, 110, 85, 75] - }, - { - name: '压力', - type: 'line', - smooth: true, - lineStyle: { - width: 1.5, - color: '#EC6941' - }, - areaStyle: { - color: { - type: 'linear', - x: 0, - y: 1, - x2: 0, - y2: 0, - colorStops: [ - { offset: 0, color: 'rgba(236, 105, 65, 0)' }, - { offset: 1, color: 'rgba(236, 105, 65, 0.3)' } - ] - } - }, - symbol: 'none', - data: [200, 300, 250, 450, 400, 430, 480, 420, 480, 280, 320, 260, 240] - } - ] - }; - - chart.setOption(option); - - // 响应式调整 - 使用ResizeObserver监听容器尺寸变化 - let resizeTimer = null; - const handleResize = () => { - // 防抖处理，避免频繁调用resize - if (resizeTimer) { - clearTimeout(resizeTimer); - } - resizeTimer = setTimeout(() => { - chart.resize(); - }, 100); - }; - - // 监听窗口大小变化 - window.addEventListener('resize', handleResize); - - // 监听容器尺寸变化（解决菜单栏伸缩时的自适应问题） - let resizeObserver = null; - if (window.ResizeObserver) { - resizeObserver = new ResizeObserver(() => { - // 使用setTimeout确保DOM更新完成后再调整图表 - setTimeout(() => { - handleResize(); - }, 0); - }); - resizeObserver.observe(chartRef.current); - } - - return () => { - window.removeEventListener('resize', handleResize); - if (resizeObserver) { - resizeObserver.disconnect(); - } - if (resizeTimer) { - clearTimeout(resizeTimer); - } - chart.dispose(); - }; - } - }, []); - - // 表格列定义 - const columns = [ - { - title: '编号', - dataIndex: 'id', - key: 'id', - width: 80, - render: (text, record, index) => { - const page = pagination.current || 1; - const pageSize = pagination.pageSize || 5; - const number = (page - 1) * pageSize + index + 1; - return `0${number}`.slice(-2); - } - }, - { - title: '报警时间', - dataIndex: 'alarmTime', - key: 'alarmTime', - width: 150, - }, - { - title: '报警传感器名称', - dataIndex: 'sensorName', - key: 'sensorName', - width: 150, - }, - { - title: '报警类型', - dataIndex: 'alarmType', - key: 'alarmType', - width: 120, - }, - { - title: '报警内容', - dataIndex: 'alarmContent', - key: 'alarmContent', - width: 200, - }, - { - title: '优先级', - dataIndex: 'priority', - key: 'priority', - width: 80, - render: (text) => { - const colorMap = { - '高': '#FF4D4F', - '中': '#FAAD14', - '低': '#52C41A' - }; - return {text}; - } - }, - { - title: '处理状态', - dataIndex: 'status', - key: 'status', - width: 100, - render: (text) => { - const statusMap = { - '未处理': { color: '#FF4D4F', bg: '#FFF2F0' }, - '处理中': { color: '#FAAD14', bg: '#FFFBE6' }, - '已处理': { color: '#52C41A', bg: '#F6FFED' } - }; - const status = statusMap[text] || { color: '#333', bg: '#F5F5F5' }; - return ( - - {text} - - ); - } - }, - { - title: '处理时间', - dataIndex: 'processTime', - key: 'processTime', - width: 150, - }, - { - title: '处理人', - dataIndex: 'processor', - key: 'processor', - width: 100, - }, - { - title: '操作', - key: 'action', - width: 120, - render: (_, record) => ( -
- -
- ), - }, - ]; - - // 模拟数据 - const mockData = [ - { - key: '1', - id: '001', - alarmTime: '2024-01-15 08:30:25', - sensorName: 'LNG储罐', - alarmType: '温度超限', - alarmContent: '储罐温度超过安全阈值', - priority: '高', - status: '未处理', - processTime: '-', - processor: '-', - }, - { - key: '2', - id: '002', - alarmTime: '2024-01-15 09:15:10', - sensorName: 'LNG储罐', - alarmType: '压力异常', - alarmContent: '管道压力异常波动', - priority: '中', - status: '处理中', - processTime: '2024-01-15 09:20:00', - processor: '张三', - }, - { - key: '3', - id: '003', - alarmTime: '2024-01-15 10:45:30', - sensorName: 'LNG储罐', - alarmType: '液位异常', - alarmContent: '储罐液位低于警戒线', - priority: '高', - status: '已处理', - processTime: '2024-01-15 11:00:15', - processor: '李四', - }, - { - key: '4', - id: '004', - alarmTime: '2024-01-15 11:20:45', - sensorName: 'LNG储罐', - alarmType: '气体泄漏', - alarmContent: '检测到可燃气体泄漏', - priority: '高', - status: '未处理', - processTime: '-', - processor: '-', - }, - { - key: '5', - id: '005', - alarmTime: '2024-01-15 12:10:20', - sensorName: 'LNG储罐', - alarmType: '设备振动', - alarmContent: '设备异常振动', - priority: '低', - status: '已处理', - processTime: '2024-01-15 12:30:00', - processor: '王五', - }, - { - key: '6', - id: '006', - alarmTime: '2024-01-15 13:25:15', - sensorName: 'LNG管道', - alarmType: '流量异常', - alarmContent: '管道流量异常波动', - priority: '中', - status: '未处理', - processTime: '-', - processor: '-', - }, - { - key: '7', - id: '007', - alarmTime: '2024-01-15 14:10:30', - sensorName: 'LNG储罐', - alarmType: '温度异常', - alarmContent: '储罐温度异常升高', - priority: '高', - status: '处理中', - processTime: '2024-01-15 14:15:00', - processor: '赵六', - }, - { - key: '8', - id: '008', - alarmTime: '2024-01-15 15:45:20', - sensorName: 'LNG管道', - alarmType: '压力超限', - alarmContent: '管道压力超过安全阈值', - priority: '高', - status: '已处理', - processTime: '2024-01-15 16:00:00', - processor: '孙七', - }, - { - key: '9', - id: '009', - alarmTime: '2024-01-15 16:30:45', - sensorName: 'LNG储罐', - alarmType: '液位超限', - alarmContent: '储罐液位超过警戒线', - priority: '中', - status: '未处理', - processTime: '-', - processor: '-', - }, - { - key: '10', - id: '010', - alarmTime: '2024-01-15 17:15:10', - sensorName: 'LNG管道', - alarmType: '泄漏检测', - alarmContent: '检测到轻微气体泄漏', - priority: '低', - status: '已处理', - processTime: '2024-01-15 17:30:00', - processor: '周八', - }, - { - key: '11', - id: '011', - alarmTime: '2024-01-15 18:20:35', - sensorName: 'LNG储罐', - alarmType: '设备故障', - alarmContent: '储罐阀门异常关闭', - priority: '高', - status: '处理中', - processTime: '2024-01-15 18:25:00', - processor: '吴九', - }, - { - key: '12', - id: '012', - alarmTime: '2024-01-15 19:05:50', - sensorName: 'LNG管道', - alarmType: '温度异常', - alarmContent: '管道温度异常下降', - priority: '中', - status: '未处理', - processTime: '-', - processor: '-', - }, - ]; - - // 初始化数据 - useEffect(() => { - setPagination(prev => ({ ...prev, total: mockData.length })); - }, []); - - // 根据分页获取当前页数据 - const getCurrentPageData = () => { - const { current, pageSize } = pagination; - const startIndex = (current - 1) * pageSize; - const endIndex = startIndex + pageSize; - return mockData.slice(startIndex, endIndex); - }; - - // 表格选择变化 - const onSelectChange = (newSelectedRowKeys, newSelectedRows) => { - setSelectedRowKeys(newSelectedRowKeys); - setSelectedRows(newSelectedRows); - }; - - // 分页变化处理 - const handleTableChange = (pagination) => { - setPagination(prev => ({ - ...prev, - current: pagination.current, - pageSize: pagination.pageSize, - })); - }; - - // 导出功能 - const handleExport = () => { - console.log('导出数据'); - // 这里可以添加导出逻辑 - }; - - // 批量删除功能 - const handleBatchDelete = () => { - if (selectedRowKeys.length === 0) { - console.log('没有选中任何行'); - // 可以在这里添加提示用户选择行的逻辑 - return; - } - console.log('批量删除', selectedRowKeys); - // 这里可以添加批量删除逻辑 - }; - - return ( -
-
-
-
-
-
- alarm0 -
- -
-
总报警
-
1456
-
-
- 未处理 6 -
-
- 处理中 10 -
-
-
-
-
-
- alarm1 -
-
-
一级报警
-
357
-
-
- 未处理 6 -
-
- 处理中 10 -
-
-
-
-
-
- alarm2 -
-
-
二级报警
-
401
-
-
- 未处理 6 -
-
- 处理中 10 -
-
-
-
-
-
- alarm3 -
-
-
三级报警
-
556
-
-
- 未处理 6 -
-
- 处理中 10 -
-
-
-
-
-
-
-
-
-
预警看板
-
-
-
检测对象
- -
-
-
- - {/* 第二行：三个小块 */} -
-
-
-
-
- {/* 第一个块：姓名和单位 */} -
-
张明
-
东义区消防队
-
- - {/* 第二个块：电话 */} -
- - 132****3847 -
- - {/* 第三个块：身份证 */} -
- - 1304************10 -
- - {/* 第四个块：职位标签 */} -
-
-
队长
-
消防工程师
-
-
- - {/* 第五个块：证书状态 */} -
-
-
消防工程师
-
证书7天后到期
-
-
- - {/* 第六个块：操作按钮 */} -
-
- - -
-
-
-
-
-
-
-
- {/* 第一个块：姓名和单位 */} -
- 李小明 - 消防支队 -
- - {/* 第二个块：电话 */} -
- - 138****5678 -
- - {/* 第三个块：身份证 */} -
- - 1304************20 -
- - {/* 第四个块：职位标签 */} -
-
-
副队长
-
安全员
-
-
- - {/* 第五个块：证书状态 */} -
-
-
安全员证
-
证书正常
-
-
- - {/* 第六个块：操作按钮 */} -
-
- - -
-
-
-
-
-
-
-
- {/* 第一个块：姓名和单位 */} -
- 王小红 - 消防中队 -
- - {/* 第二个块：电话 */} -
- - 139****9012 -
- - {/* 第三个块：身份证 */} -
- - 1304************30 -
- - {/* 第四个块：职位标签 */} -
-
-
队员
-
技术员
-
-
- - {/* 第五个块：证书状态 */} -
-
-
技术员证
-
证书3天后到期
-
-
- - {/* 第六个块：操作按钮 */} -
-
- - -
-
-
-
-
-
-
-
-
- -
- {/* 第一块：标题 */} -
-
-
-
组织架构管理
-
-
- - {/* 第二个大块：搜索和按钮 */} -
-
- -
-
- - - -
-
- - {/* 第三个大块：表格 */} -
- {}} // ======== 行选择事件处理函数 ======== - onChange={() => {}} // ======== 表格变化事件处理函数 ======== - pagination={{ - currentPage: 1, - pageSize: 5, - total: tableData.length, - showSizeChanger: false, - showQuickJumper: true, - showTotal: (total, range) => - `共 ${total} 条`, - locale: { - jump_to: '前往', - page: '页', - items_per_page: '条/页', - } - }} - /> -
-
-
- ); -}; -export default ResponsibilityImplementation; diff --git a/src/pages/business_basic/components/ResponsibilityImplementation.less b/src/pages/business_basic/components/ResponsibilityImplementation.less deleted file mode 100644 index d94eca3..0000000 --- a/src/pages/business_basic/components/ResponsibilityImplementation.less +++ /dev/null @@ -1,1000 +0,0 @@ -.XcontainerR { - padding: 8px 6px; - height: 100%; - display: flex; - flex-direction: column; - - .warningBox { - width: 100%; - background-color: #FFF3CD; - border: 1px solid #F4E3AE; - border-radius: 4px; - padding: 8px 20px; - display: flex; - align-items: center; - gap: 8px; - margin-bottom: 10px; - - .warningIcon { - width: 18px; - height: 18px; - } - - .warningText { - color: #8C6C0B; - font-size: 12px; - line-height: 1.4; - } - } - - .containerOne { - height: 40%; - flex-shrink: 0; - display: flex; - margin-bottom: 10px; - gap: 10px; - - .containerOneLeft { - background-color: white; - width: calc(50% - 5px); - display: flex; - flex-direction: column; - padding: 5px 15px; - border: 1px solid #f0f0f0; - border-radius: 4px; - - .leftTopSection { - display: flex; - justify-content: space-between; - align-items: center; - // margin-bottom: 15px; - - .titleLeft { - 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; - } - } - - .buttonGroup { - display: flex; - gap: 8px; - - .actionBtn { - display: flex; - align-items: center; - gap: 4px; - height: 28px; - border: 1px solid #DFE4F6; - border-radius: 4px; - color: #2E4CD4; - font-weight: 500; - font-size: 12px; - padding: 0px 8px; - background: transparent; - cursor: pointer; - transition: all 0.2s; - - &:hover { - background-color: #F0F2FF; - border-color: #2E4CD4; - } - - .btnIcon { - width: 12px; - height: 12px; - } - } - } - } - - .leftBottomSection { - flex: 1; - display: flex; - align-items: center; - justify-content: center; - - .imagePlaceholder { - display: flex; - flex-direction: column; - align-items: center; - - .imageIcon1 { - transform: scale(0.9) translateY(-5px); // 稍微向上移动 - object-fit: contain; - } - - - .imageRow { - display: flex; - justify-content: space-between; - // width: 100%; - margin-bottom: 10px; - // padding-bottom: 20px; - // gap: 12px; - - .imageIcon2 { - height: 55%; - transform: scale(0.7) translateY(-25%) translateX(20%); // 稍微向上移动 - object-fit: contain; - background-color: #EFF5FE; - // padding-bottom: 20px; - } - - .imageIcon3 { - height: 40%; - transform: scale(0.65) translateY(-32%) translateX(4%); // 向上移动10px - object-fit: contain; - padding-bottom: 20px; - // background-color: #EFF5FE; - - } - } - - .imageText { - font-size: 12px; - font-weight: 400; - } - } - } - } - - .containerOneRight { - background-color: white; - width: calc(50% - 5px); - display: flex; - flex-direction: column; - padding: 5px 15px; - border: 1px solid #f0f0f0; - border-radius: 4px; - - .rightTopSection { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 10px; - - .rightTopLeft { - display: flex; - align-items: center; - - .titleLeft { - 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; - } - } - } - - .rightTopRight { - .searchGroup { - display: flex; - gap: 8px; - align-items: center; - - .searchInput { - width: 200px; - height: 32px; - - :global(.ant-input) { - height: 32px; - border-radius: 4px; - border: 1px solid #d9d9d9; - font-size: 14px; - - &:focus { - border-color: #2E4CD4; - box-shadow: 0 0 0 2px rgba(46, 76, 212, 0.2); - } - } - - :global(.ant-input-suffix) { - color: #999999; - font-size: 14px; - } - } - - .organizationSelect { - width: 120px; - height: 32px; - - :global(.ant-select-selector) { - height: 32px !important; - border-radius: 4px !important; - border: 1px solid #d9d9d9 !important; - - &:hover { - border-color: #2E4CD4 !important; - } - - &:focus { - border-color: #2E4CD4 !important; - box-shadow: 0 0 0 2px rgba(46, 76, 212, 0.2) !important; - } - } - - :global(.ant-select-selection-item) { - line-height: 30px !important; - font-size: 14px !important; - } - } - } - } - } - - .rightBottomSection { - flex: 1; - padding: 5px 15px; - width: 100%; - height: 100%; - - .threeBlocksContainer { - display: flex; - gap: 20px; - width: 100%; - height: 100%; - - .blockItem { - width: 100%; - height: 100%; - flex: 1; - display: flex; - justify-content: center; - background: url('@/assets/business_basic/background1.png') no-repeat center center; - background-size: 100% auto; - - .blockContent { - // background-color: pink; - font-size: 12px; - color: #666666; - font-weight: 400; - width: 100%; - height: 100%; - } - - // 新的6个横向块样式 - .backgroundContainer { - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - gap: 8px; - - .infoBlock { - width: 100%; - display: flex; - justify-content: flex-start; - white-space: nowrap; - - .nameText { - font-size: 12px; - font-weight: 500; - color: #333333; - margin-left: 10px; - margin-right: 10px; - margin-top: 15px; - } - - - .unitText { - font-size: 10px; - font-weight: 400; - color: #666666; - margin-top: 18px; - } - - .infoIcon { - font-size: 10px; - color: #666666; - margin-left: 10px; - margin-right: 10px; - } - - .infoText { - font-size: 10px; - font-weight: 400; - color: #666666; - - } - - } - - .tagContainer { - display: flex; - gap: 8px; - align-items: center; - } - - .tagBlue1 { - background-color: #D5E5FF; - color: #1269FF; - font-size: 10px; - font-weight: 400; - padding: 4px 8px; - border-radius: 4px; - white-space: nowrap; - margin-left: 10px; - } - - .tagBlue2 { - background-color: #D5E5FF; - color: #1269FF; - font-size: 10px; - font-weight: 400; - padding: 4px 8px; - border-radius: 4px; - white-space: nowrap; - - } - - .tagBlue3 { - background-color: #D5E5FF; - color: #1269FF; - font-size: 10px; - font-weight: 400; - padding: 4px 8px; - border-radius: 4px; - white-space: nowrap; - margin-left: 10px; - - } - - .tagYellow { - background-color: #FFF8E2; - color: #FFC403; - font-size: 10px; - font-weight: 400; - padding: 4px 8px; - border-radius: 4px; - white-space: nowrap; - } - - .actionBlock { - width: 100%; - height: 50%; - background-color: #BDD6FDCC; - display: flex; - align-items: center; - justify-content: center; - } - - .buttonContainer { - display: flex; - gap: 15px; - align-items: center; - justify-content: center; - width: 100%; - - .editBtn { - height: 80%; - background-color: #1269FF; - color: #fff; - font-size: 10px; - font-weight: 400; - border: none; - border-radius: 2px; - cursor: pointer; - padding: 2px 15px; - - &:hover { - background-color: #0f5ae0; - } - } - - .deleteBtn { - height: 80%; - background-color: #FF5F60; - color: #fff; - font-size: 10px; - font-weight: 400; - border: none; - border-radius: 2px; - cursor: pointer; - padding: 2px 15px; - - &:hover { - background-color: #ff4a4b; - } - } - } - - - } - - // 第二个块的样式 - .backgroundContainer2 { - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - gap: 8px; - - .infoBlock2 { - width: 100%; - display: flex; - justify-content: flex-start; - white-space: nowrap; - - .nameText2 { - font-size: 12px; - font-weight: 500; - color: #333333; - margin-left: 10px; - margin-right: 10px; - margin-top: 15px; - } - - .unitText2 { - font-size: 10px; - font-weight: 400; - color: #666666; - margin-top: 18px; - } - - .infoIcon2 { - font-size: 10px; - color: #666666; - margin-left: 10px; - margin-right: 10px; - } - - .infoText2 { - font-size: 10px; - font-weight: 400; - color: #666666; - } - } - - .tagContainer2 { - display: flex; - gap: 8px; - align-items: center; - } - - .tagBlue4 { - background-color: #D5E5FF; - color: #1269FF; - font-size: 10px; - font-weight: 400; - padding: 4px 8px; - border-radius: 4px; - white-space: nowrap; - margin-left: 10px; - } - - .tagBlue5 { - background-color: #D5E5FF; - color: #1269FF; - font-size: 10px; - font-weight: 400; - padding: 4px 8px; - border-radius: 4px; - white-space: nowrap; - } - - .tagBlue6 { - background-color: #D5E5FF; - color: #1269FF; - font-size: 10px; - font-weight: 400; - padding: 4px 8px; - border-radius: 4px; - white-space: nowrap; - margin-left: 10px; - } - - .tagGreen { - background-color: #E8F5E8; - color: #52C41A; - font-size: 10px; - font-weight: 400; - padding: 4px 8px; - border-radius: 4px; - white-space: nowrap; - } - - .actionBlock2 { - width: 100%; - height: 50%; - background-color: #BDD6FDCC; - display: flex; - align-items: center; - justify-content: center; - } - - .buttonContainer2 { - display: flex; - gap: 15px; - align-items: center; - justify-content: center; - width: 100%; - - .editBtn2 { - height: 80%; - background-color: #1269FF; - color: #fff; - font-size: 10px; - font-weight: 400; - border: none; - border-radius: 2px; - cursor: pointer; - padding: 2px 15px; - - &:hover { - background-color: #0f5ae0; - } - } - - .deleteBtn2 { - height: 80%; - background-color: #FF5F60; - color: #fff; - font-size: 10px; - font-weight: 400; - border: none; - border-radius: 2px; - cursor: pointer; - padding: 2px 15px; - - &:hover { - background-color: #ff4a4b; - } - } - } - } - - // 第三个块的样式 - .backgroundContainer3 { - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - gap: 8px; - - .infoBlock3 { - width: 100%; - display: flex; - justify-content: flex-start; - white-space: nowrap; - - .nameText3 { - font-size: 12px; - font-weight: 500; - color: #333333; - margin-left: 10px; - margin-right: 10px; - margin-top: 15px; - } - - .unitText3 { - font-size: 10px; - font-weight: 400; - color: #666666; - margin-top: 18px; - } - - .infoIcon3 { - font-size: 10px; - color: #666666; - margin-left: 10px; - margin-right: 10px; - } - - .infoText3 { - font-size: 10px; - font-weight: 400; - color: #666666; - } - } - - .tagContainer3 { - display: flex; - gap: 8px; - align-items: center; - } - - .tagBlue7 { - background-color: #D5E5FF; - color: #1269FF; - font-size: 10px; - font-weight: 400; - padding: 4px 8px; - border-radius: 4px; - white-space: nowrap; - margin-left: 10px; - } - - .tagBlue8 { - background-color: #D5E5FF; - color: #1269FF; - font-size: 10px; - font-weight: 400; - padding: 4px 8px; - border-radius: 4px; - white-space: nowrap; - } - - .tagBlue9 { - background-color: #D5E5FF; - color: #1269FF; - font-size: 10px; - font-weight: 400; - padding: 4px 8px; - border-radius: 4px; - white-space: nowrap; - margin-left: 10px; - } - - .tagOrange { - background-color: #FFF2E8; - color: #FF7A00; - font-size: 10px; - font-weight: 400; - padding: 4px 8px; - border-radius: 4px; - white-space: nowrap; - } - - .actionBlock3 { - width: 100%; - height: 50%; - background-color: #BDD6FDCC; - display: flex; - align-items: center; - justify-content: center; - } - - .buttonContainer3 { - display: flex; - gap: 15px; - align-items: center; - justify-content: center; - width: 100%; - - .editBtn3 { - height: 80%; - background-color: #1269FF; - color: #fff; - font-size: 10px; - font-weight: 400; - border: none; - border-radius: 2px; - cursor: pointer; - padding: 2px 15px; - - &:hover { - background-color: #0f5ae0; - } - } - - .deleteBtn3 { - height: 80%; - background-color: #FF5F60; - color: #fff; - font-size: 10px; - font-weight: 400; - border: none; - border-radius: 2px; - cursor: pointer; - padding: 2px 15px; - - &:hover { - background-color: #ff4a4b; - } - } - } - } - } - } - } - } - } - - .containerTwo { - flex: 1; - background-color: white; - display: flex; - flex-direction: column; - padding: 5px 15px; - border: 1px solid #f0f0f0; - border-radius: 4px; - - .containerTwoTitle { - margin-top: 5px; - margin-bottom: 15px; - - .titleLeft { - 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; - } - } - } - - .containerTwoActions { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 15px; - padding: 0px 20px; - - .searchSection { - flex: 1; - max-width: 300px; - - :global(.ant-input) { - height: 32px; - border-radius: 4px 0px 0px 4px; - border: 1px solid #d9d9d9; - - &:focus { - border-color: #2E4CD4; - box-shadow: 0 0 0 2px rgba(46, 76, 212, 0.2); - } - } - } - - .buttonSection { - display: flex; - gap: 8px; - - :global(.ant-btn) { - height: 28px; - padding: 0 16px; - border-radius: 4px; - font-size: 14px; - border: 1px solid #d9d9d9; - background-color: #fff; - color: #333; - - &:hover { - border-color: #2E4CD4; - color: #2E4CD4; - } - - &:focus { - border-color: #2E4CD4; - color: #2E4CD4; - } - } - - .addBtn { - display: flex; - align-items: center; - gap: 4px; - height: 28px; - border: 1px solid #DFE4F6; - border-radius: 4px; - color: #2E4CD4; - font-weight: 500; - font-size: 12px; - padding: 0px 8px; - background: transparent; - cursor: pointer; - transition: all 0.2s; - - &:hover { - background-color: #F0F2FF; - border-color: #2E4CD4; - } - - .addIcon { - width: 12px; - height: 12px; - font-size: 12px; - } - } - - .importBtn { - display: flex; - align-items: center; - gap: 4px; - height: 28px; - border: 1px solid #DFE4F6; - border-radius: 4px; - color: #2E4CD4; - font-weight: 500; - font-size: 12px; - padding: 0px 8px; - background: transparent; - cursor: pointer; - transition: all 0.2s; - - &:hover { - background-color: #F0F2FF; - border-color: #2E4CD4; - } - - .importIcon { - width: 12px; - height: 12px; - } - } - - .exportBtn { - display: flex; - align-items: center; - gap: 4px; - height: 28px; - border: 1px solid #DFE4F6; - border-radius: 4px; - color: #2E4CD4; - font-weight: 500; - font-size: 12px; - padding: 0px 8px; - background: transparent; - cursor: pointer; - transition: all 0.2s; - - &:hover { - background-color: #F0F2FF; - border-color: #2E4CD4; - } - - .exportIcon { - width: 12px; - height: 12px; - } - } - } - } - - .containerTwoTable { - flex: 1; - overflow: hidden; - padding: 0px 20px; - - :global(.ant-table) { - font-size: 12px; - } - :global(.ant-pagination-options-quick-jumper input) { - text-align: center !important; - } - - :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; - color: #666666; - // color: pink; - } - - :global(.ant-table-tbody > tr:hover > td) { - // background-color: #f5f5f5; - } - - :global(.ant-pagination) { - margin-top: 16px; - text-align: right; - } - } - } -} - - -.rightTopSelect { - - // 下拉框本身的样式 - :global(.ant-select-selector) { - background-color: #f8f9fa !important; - border: 1px solid #d9d9d9 !important; - border-radius: 6px !important; - height: 32px !important; - min-height: 32px !important; - - &:hover { - border-color: #2E4CD4 !important; - } - - &:focus { - border-color: #2E4CD4 !important; - box-shadow: 0 0 0 2px rgba(46, 76, 212, 0.2) !important; - } - } - - // 下拉框内的文字样式 - :global(.ant-select-selection-item) { - color: #333333 !important; - font-size: 14px !important; - font-weight: 500 !important; - line-height: 30px !important; - } - - // 下拉箭头样式 - :global(.ant-select-arrow) { - color: #666666 !important; - font-size: 12px !important; - } - - // 下拉菜单容器样式 - :global(.ant-select-dropdown) { - background-color: #ffffff !important; - border: 1px solid #e8e8e8 !important; - border-radius: 8px !important; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; - padding: 4px 0 !important; - } - - // 下拉选项样式 - :global(.ant-select-item) { - color: #333333 !important; - font-size: 14px !important; - padding: 8px 12px !important; - border-radius: 4px !important; - margin: 2px 8px !important; - - &:hover { - background-color: #f0f2ff !important; - color: #2E4CD4 !important; - } - - &.ant-select-item-option-selected { - background-color: #e6f7ff !important; - color: #2E4CD4 !important; - font-weight: 600 !important; - } - } - - // 选中状态的样式 - :global(.ant-select-focused .ant-select-selector) { - border-color: #2E4CD4 !important; - box-shadow: 0 0 0 2px rgba(46, 76, 212, 0.2) !important; - } -} - -// 自定义选项样式 -.customOption { - display: flex; - align-items: center; - gap: 8px; - padding: 4px 0; - - .optionIcon { - font-size: 16px; - color: #2E4CD4; - } - - .optionText { - font-size: 14px; - color: #333333; - font-weight: 500; - } -} - diff --git a/src/pages/business_basic/components/RiskAssessment.js b/src/pages/business_basic/components/RiskAssessment.js deleted file mode 100644 index 46d5b50..0000000 --- a/src/pages/business_basic/components/RiskAssessment.js +++ /dev/null @@ -1,865 +0,0 @@ - -import React, { useEffect, useRef, useState } from 'react'; -import { Card, Result, Select, Button, Segmented } from 'antd'; -import { CheckCircleOutlined, ExportOutlined } from '@ant-design/icons'; -import * as echarts from 'echarts'; -import StandardTable from '@/components/StandardTable'; -import styles from './RiskAssessment.less'; -// import './RiskAssessment.less'; - -import img1 from '@/assets/safe_majorHazard/online_monitoring/img1.png'; -import img2 from '@/assets/safe_majorHazard/online_monitoring/img2.png'; -import img3 from '@/assets/safe_majorHazard/online_monitoring/img3.png'; -import map1 from '@/assets/safe_majorHazard/online_monitoring/map.png'; -import risk1 from '@/assets/safe_majorHazard/online_monitoring/risk1.png'; -import risk2 from '@/assets/safe_majorHazard/online_monitoring/risk2.png'; -import risk3 from '@/assets/safe_majorHazard/online_monitoring/risk3.png'; -import eqicon1 from '@/assets/business_basic/eqicon1.png'; -import eqicon2 from '@/assets/business_basic/eqicon2.png'; -import eqicon3 from '@/assets/business_basic/eqicon3.png'; -import eqicon4 from '@/assets/business_basic/eqicon4.png'; - -const RiskAssessment = () => { - const chartRef = useRef(null); - const pieChartRef = useRef(null); - const faultPieChartRef = useRef(null); - const [selectedRowKeys, setSelectedRowKeys] = useState([]); - const [selectedRows, setSelectedRows] = useState([]); - const [loading, setLoading] = useState(false); - const [dataSource, setDataSource] = useState([]); - const [pagination, setPagination] = useState({ - current: 1, - pageSize: 5, - total: 0, - }); - - // 饼图初始化 - useEffect(() => { - if (pieChartRef.current) { - const pieChart = echarts.init(pieChartRef.current); - - const pieOption = { - color: ['#44BB5F', '#F8C541', '#A493FB', '#4B69F1', '#949FD0'], - legend: { - orient: 'vertical', - right: '10%', - top: 'center', - itemWidth: 8, - itemHeight: 8, - textStyle: { - fontSize: 12, - color: '#333' - } - }, - series: [{ - name: '设备状态', - type: 'pie', - radius: ['40%', '70%'], - center: ['35%', '50%'], - avoidLabelOverlap: false, - label: { - show: false, - position: 'center' - }, - emphasis: { - label: { - show: true, - fontSize: '14', - fontWeight: 'bold' - } - }, - labelLine: { - show: false - }, - data: [ - { value: 480, name: '正常' }, - { value: 289, name: '故障' }, - { value: 200, name: '维修中' }, - { value: 150, name: '待验收' }, - { value: 161, name: '停用' } - ] - }] - }; - - pieChart.setOption(pieOption); - - // 响应式调整 - const handlePieResize = () => { - if (pieChart && !pieChart.isDisposed()) { - pieChart.resize(); - } - }; - - window.addEventListener('resize', handlePieResize); - - return () => { - window.removeEventListener('resize', handlePieResize); - if (pieChart && !pieChart.isDisposed()) { - pieChart.dispose(); - } - }; - } - }, []); - - // 故障类型饼图初始化 - useEffect(() => { - if (faultPieChartRef.current) { - const faultPieChart = echarts.init(faultPieChartRef.current); - - const faultPieOption = { - color: ['#FF3E48', '#FF8800', '#FFC403'], - legend: { - orient: 'vertical', - right: '10%', - top: 'center', - itemWidth: 8, - itemHeight: 8, - textStyle: { - fontSize: 12, - color: '#333' - } - }, - series: [{ - name: '设备故障类型', - type: 'pie', - radius: '70%', - center: ['35%', '50%'], - avoidLabelOverlap: false, - label: { - show: true, - position: 'outside', - formatter: '{b}: {c}', - fontSize: 12 - }, - emphasis: { - label: { - show: true, - fontSize: '14', - fontWeight: 'bold' - } - }, - labelLine: { - show: true - }, - data: [ - { value: 120, name: '紧急' }, - { value: 80, name: '重要' }, - { value: 60, name: '一般' } - ] - }] - }; - - faultPieChart.setOption(faultPieOption); - - // 响应式调整 - const handleFaultPieResize = () => { - if (faultPieChart && !faultPieChart.isDisposed()) { - faultPieChart.resize(); - } - }; - - window.addEventListener('resize', handleFaultPieResize); - - return () => { - window.removeEventListener('resize', handleFaultPieResize); - if (faultPieChart && !faultPieChart.isDisposed()) { - faultPieChart.dispose(); - } - }; - } - }, []); - - useEffect(() => { - if (chartRef.current) { - const chart = echarts.init(chartRef.current); - - // 强制初始化时调整大小 - setTimeout(() => { - if (chart && !chart.isDisposed()) { - chart.resize(); - } - }, 100); - - const option = { - color: ['#8979FF', '#3CC3DF'], - - legend: { - // data: ['消防水泵1', '消防水泵2'], - top: "-3px", - // left: "center", - // itemGap: 40, - itemWidth: 20, - itemHeight: 8, - // icon: 'path://M902 472.7H747.9c-19.1-113.3-117.7-200-236.4-200s-217.3 86.7-236.4 200H119.7c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h155.5c19.1 113.3 117.7 200 236.4 200S728.9 666 748 552.7h154c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8z m-390.5 200c-88.2 0-160-71.8-160-160s71.8-160 160-160 160 71.8 160 160-71.8 160-160 160z', - textStyle: { - fontSize: 10 - } - }, - grid: { - left: '2%', - right: '4%', - bottom: '2%', - top: '12%', - containLabel: true - }, - xAxis: { - type: 'category', - boundaryGap: false, - data: ['9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00'], - axisLabel: { - fontSize: 10 - } - }, - yAxis: { - type: 'value', - min: 0, - max: 30, - axisLabel: { - formatter: '{value}', - fontSize: 10 - } - }, - series: [ - { - name: '消防水泵1', - type: 'line', - smooth: false, - lineStyle: { - width: 2, - color: '#8979FF' - }, - areaStyle: { - color: { - type: 'linear', - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [ - { offset: 0, color: 'rgba(137, 121, 255, 0.3)' }, - { offset: 1, color: 'rgba(137, 121, 255, 0.05)' } - ] - } - }, - symbol: 'circle', - symbolSize: 4, - itemStyle: { - color: '#fff', - borderColor: '#8979FF', - borderWidth: 1 - }, - data: [12, 15, 18, 14, 16, 20, 22, 19, 17, 21, 23, 25] - }, - { - name: '消防水泵2', - type: 'line', - smooth: false, - lineStyle: { - width: 2, - color: '#3CC3DF' - }, - areaStyle: { - color: { - type: 'linear', - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [ - { offset: 0, color: 'rgba(60, 195, 223, 0.3)' }, - { offset: 1, color: 'rgba(60, 195, 223, 0.05)' } - ] - } - }, - symbol: 'circle', - symbolSize: 4, - itemStyle: { - color: '#fff', - borderColor: '#3CC3DF', - borderWidth: 1 - }, - data: [8, 11, 14, 10, 13, 17, 19, 16, 14, 18, 20, 22] - } - ] - }; - - chart.setOption(option); - - // 响应式调整 - 使用多种方式监听容器尺寸变化 - let resizeTimer = null; - const handleResize = () => { - // 防抖处理，避免频繁调用resize - if (resizeTimer) { - clearTimeout(resizeTimer); - } - resizeTimer = setTimeout(() => { - if (chart && !chart.isDisposed()) { - chart.resize(); - } - }, 50); // 减少延迟时间 - }; - - // 监听窗口大小变化 - window.addEventListener('resize', handleResize); - - // 监听容器尺寸变化（解决菜单栏伸缩时的自适应问题） - let resizeObserver = null; - if (window.ResizeObserver) { - resizeObserver = new ResizeObserver((entries) => { - for (let entry of entries) { - // 使用requestAnimationFrame确保在下一帧执行 - requestAnimationFrame(() => { - handleResize(); - }); - } - }); - resizeObserver.observe(chartRef.current); - } - - // 额外监听父容器的尺寸变化 - const parentContainer = chartRef.current?.parentElement; - let parentObserver = null; - if (parentContainer && window.ResizeObserver) { - parentObserver = new ResizeObserver((entries) => { - for (let entry of entries) { - requestAnimationFrame(() => { - handleResize(); - }); - } - }); - parentObserver.observe(parentContainer); - } - - // 使用MutationObserver监听DOM结构变化（菜单展开收起时） - const mutationObserver = new MutationObserver((mutations) => { - mutations.forEach((mutation) => { - if (mutation.type === 'attributes' && - (mutation.attributeName === 'class' || mutation.attributeName === 'style')) { - // 延迟执行，确保DOM更新完成 - setTimeout(() => { - handleResize(); - }, 200); - } - }); - }); - - // 监听整个页面的class和style变化 - mutationObserver.observe(document.body, { - attributes: true, - attributeFilter: ['class', 'style'], - subtree: true - }); - - return () => { - window.removeEventListener('resize', handleResize); - if (resizeObserver) { - resizeObserver.disconnect(); - } - if (parentObserver) { - parentObserver.disconnect(); - } - if (mutationObserver) { - mutationObserver.disconnect(); - } - if (resizeTimer) { - clearTimeout(resizeTimer); - } - if (chart && !chart.isDisposed()) { - chart.dispose(); - } - }; - } - }, []); - - // 表格列定义 - const columns = [ - { - title: '编号', - dataIndex: 'id', - key: 'id', - width: 60, - render: (text, record, index) => { - const page = pagination.current || 1; - const pageSize = pagination.pageSize || 5; - const number = (page - 1) * pageSize + index + 1; - return `0${number}`.slice(-2); - } - }, - { - title: '设备编号', - dataIndex: 'deviceId', - key: 'deviceId', - width: 140, - }, - { - title: '设备名称', - dataIndex: 'deviceName', - key: 'deviceName', - width: 110, - }, - { - title: '型号规格', - dataIndex: 'modelSpec', - key: 'modelSpec', - width: 140, - }, - { - title: '安装位置', - dataIndex: 'installLocation', - key: 'installLocation', - width: 200, - }, - { - title: '状态', - dataIndex: 'status', - key: 'status', - width: 80, - render: (text) => { - const statusMap = { - '故障': { color: '#FF4D4F', bg: '#FFF2F0' }, - '预警': { color: '#FAAD14', bg: '#FFF3E9' }, - '正常': { color: '#44BB5F', bg: '#D8F7DE' } - }; - const status = statusMap[text] || { color: '#333', bg: '#F5F5F5' }; - return ( - - {text} - - ); - } - }, - { - title: '最后维护', - dataIndex: 'lastMaintenance', - key: 'lastMaintenance', - width: 150, - }, - { - title: '操作', - key: 'action', - width: 140, - render: (_, record) => ( -
- - -
- ), - }, - ]; - - // 模拟数据 - const mockData = [ - { - key: '1', - id: '001', - deviceId: 'HQ-XF-01-001', - deviceName: '消防水泵', - modelSpec: 'XBD5.0/30-125', - installLocation: '总部大楼1层大厅', - status: '故障', - lastMaintenance: '2025-09-10', - }, - { - key: '2', - id: '002', - deviceId: 'HQ-XF-01-001', - deviceName: '消防水泵', - modelSpec: 'XBD5.0/30-125', - installLocation: '总部大楼3层 东区', - status: '预警', - lastMaintenance: '2025-09-10', - }, - { - key: '3', - id: '003', - deviceId: 'HQ-XF-01-001', - deviceName: '消防水泵', - modelSpec: 'XBD5.0/30-125', - installLocation: '总部大楼地下一层', - status: '正常', - lastMaintenance: '2025-09-10', - }, - { - key: '4', - id: '004', - deviceId: 'HQ-XF-01-001', - deviceName: '消防水泵', - modelSpec: 'XBD5.0/30-125', - installLocation: '总部大楼地下一层', - status: '故障', - lastMaintenance: '2025-09-10', - }, - { - key: '5', - id: '005', - deviceId: 'HQ-XF-01-001', - deviceName: '消防水泵', - modelSpec: 'XBD5.0/30-125', - installLocation: '总部大楼地下一层', - status: '正常', - lastMaintenance: '2025-09-10', - }, - { - key: '6', - id: '006', - deviceId: 'HQ-XF-01-001', - deviceName: '消防水泵', - modelSpec: 'XBD5.0/30-125', - installLocation: '总部大楼地下一层', - status: '预警', - lastMaintenance: '2025-09-10', - }, - { - key: '7', - id: '007', - deviceId: 'HQ-XF-01-001', - deviceName: '消防水泵', - modelSpec: 'XBD5.0/30-125', - installLocation: '总部大楼地下一层', - status: '故障', - lastMaintenance: '2025-09-10', - }, - { - key: '8', - id: '008', - deviceId: 'HQ-XF-01-001', - deviceName: '消防水泵', - modelSpec: 'XBD5.0/30-125', - installLocation: '总部大楼地下一层', - status: '正常', - lastMaintenance: '2025-09-10', - }, - { - key: '9', - id: '009', - deviceId: 'HQ-XF-01-001', - deviceName: '消防水泵', - modelSpec: 'XBD5.0/30-125', - installLocation: '总部大楼地下一层', - status: '预警', - lastMaintenance: '2025-09-10', - }, - { - key: '10', - id: '010', - deviceId: 'HQ-XF-01-001', - deviceName: '消防水泵', - modelSpec: 'XBD5.0/30-125', - installLocation: '总部大楼地下一层', - status: '故障', - lastMaintenance: '2025-09-10', - }, - { - key: '11', - id: '011', - deviceId: 'HQ-XF-01-001', - deviceName: '消防水泵', - modelSpec: 'XBD5.0/30-125', - installLocation: '总部大楼地下一层', - status: '正常', - lastMaintenance: '2025-09-10', - }, - { - key: '12', - id: '012', - deviceId: 'HQ-XF-01-001', - deviceName: '消防水泵', - modelSpec: 'XBD5.0/30-125', - installLocation: '总部大楼地下一层', - status: '预警', - lastMaintenance: '2025-09-10', - }, - ]; - - // 初始化数据 - useEffect(() => { - setPagination(prev => ({ ...prev, total: mockData.length })); - }, []); - - // 根据分页获取当前页数据 - const getCurrentPageData = () => { - const { current, pageSize } = pagination; - const startIndex = (current - 1) * pageSize; - const endIndex = startIndex + pageSize; - return mockData.slice(startIndex, endIndex); - }; - - // 表格选择变化 - const onSelectChange = (newSelectedRowKeys, newSelectedRows) => { - setSelectedRowKeys(newSelectedRowKeys); - setSelectedRows(newSelectedRows); - }; - - // 新增设备按钮点击事件 - const handleAddDevice = () => { - console.log('新增设备'); - // TODO: 实现新增设备逻辑 - }; - - // 导出数据按钮点击事件 - const handleExportData = () => { - console.log('导出数据'); - // TODO: 实现导出数据逻辑 - }; - - // 分页变化处理 - const handleTableChange = (pagination) => { - setPagination(prev => ({ - ...prev, - current: pagination.current, - pageSize: pagination.pageSize, - })); - }; - - return ( -
- {/* 第一个div - 高度20% */} -
-
-
- {/* 块1 */} -
-
-
设备总数
-
1280
-
-
- 设备总数 -
-
- - {/* 块2 */} -
-
-
正常运行
-
480
-
-
- 高风险设备 -
-
- - {/* 块3 */} -
-
-
需要维护
-
347
-
-
- 今日预警次数 -
-
- - {/* 块4 */} -
-
-
故障设备
-
289
-
-
- 未处理预警 -
-
- -
-
-
- - -
-
-
-
-
-
- 设备状态分布 -
- { - console.log(value); - }} - /> -
- {/* 设备状态饼图 */} -
-
- -
- -
-
-
-
- 设备故障类型分布 -
- -
-
-
-
-
- -
-
- - {/* 第三个div - 占满剩余位置 */} -
-
-
- {/* 第一行块 - 蓝色方块加标题 */} -
-
-
预警信息
-
- -
-
-
-
灭火器压力不足
-
2号楼3层 丨 15分钟前
-
-
-
重要
-
-
-
-
-
烟雾探测器电池低电量
-
1号楼5层 丨 1小时前
-
-
-
重要
-
-
-
-
-
消防栓维护到期
-
3号楼1层 丨 2小时前
-
-
-
一般
-
-
-
-
-
应急照明故障
-
地下停车场 丨 3小时前
-
-
-
一般
-
-
-
-
- -
- {/* 表格 */} -
-
-
-
消防设备台账
-
- -
- - -
-
- - {/* 表格 */} -
- - `共 ${total} 条`, - }} - // scroll={{ x: 1200 }} - /> -
-
-
-
- - ); -}; - -export default RiskAssessment; \ No newline at end of file diff --git a/src/pages/business_basic/components/RiskAssessment.less b/src/pages/business_basic/components/RiskAssessment.less deleted file mode 100644 index db5b47e..0000000 --- a/src/pages/business_basic/components/RiskAssessment.less +++ /dev/null @@ -1,594 +0,0 @@ -.Rcontainer { - padding: 8px 6px 0px 6px; - height: 100%; - display: flex; - flex-direction: column; - gap: 10px; - - // 第一个div - 高度20% - .RcontainerTop { - height: 16%; - // background-color: #fff; - border-radius: 4px; - display: flex; - flex-direction: column; - - .sectionContent { - height: 100%; - display: flex; - flex-direction: column; - // padding: 15px; - - .blocksContainer { - flex: 1; - display: flex; - gap: 10px; - height: 100%; - - .blockItem { - flex: 1; - height: 100%; - display: flex; - background: linear-gradient(170.5deg, #F5F7FF 6.87%, #FFFFFF 47.65%); - border-radius: 4px; - border: 2px solid #FFFFFF; - - .blockLeft { - width: 60%; - height: 100%; - display: flex; - flex-direction: column; - justify-content: center; - padding: 15px; - padding-left: 20px; - gap: 8px; - - .blockTitle { - font-family: PingFang SC; - font-weight: 400; - font-size: 12px; - color: #333333; - line-height: 1.2; - } - - .blockNumber { - font-family: PingFang SC; - font-weight: 700; - font-size: 24px; - color: #333333; - line-height: 1.2; - } - - .blockChange { - font-family: PingFang SC; - font-weight: 400; - font-size: 12px; - color: #1269FF; - line-height: 1.2; - display: flex; - align-items: center; - gap: 4px; - - .arrow { - font-size: 14px; - font-weight: bold; - } - - .checkIcon { - font-size: 16px; - color: #1269FF; - } - } - } - - .blockRight { - flex: 1; - height: 100%; - background-color: transparent; - border-radius: 0 4px 4px 0; - display: flex; - align-items: center; - justify-content: center; - - .blockImage { - // width: 80%; - height: 65%; - // height: 80%; - object-fit: contain; - margin-right: -5px; - } - } - } - } - } - } - - // 第二个div - 高度39% - .RcontainerMiddle { - height: 33%; - border-radius: 4px; - display: flex; - flex-direction: column; - - .sectionContent { - height: 100%; - display: flex; - display: flex; - gap: 10px; - height: 100%; - - - - .middleBlock1 { - // flex: 1; - width: 28%; - height: 100%; - background: #fff; - - border: 2px solid #fff; - // border-radius: 4px; - position: relative; - padding: 0px 10px 10px 2px; - font-family: PingFang SC; - font-size: 14px; - color: #333333; - - .block1Header { - position: absolute; - top: 5px; - left: 10px; - right: 10px; - display: flex; - justify-content: space-between; - align-items: center; - z-index: 10; - - .block1Title { - display: flex; - align-items: center; - gap: 8px; - font-weight: 500; - font-size: 14px; - color: #333333; - - .titleIcon { - width: 3px; - height: 14px; - background-color: #2E4CD4; - } - } - - .block1Segmented { - padding: 0; - margin: 0; - border: 1px solid #E3E3E3; - border-radius: 4px; - height: 28px; - - :global(.ant-segmented) { - padding: 0; - margin: 0; - height: 28px; - } - - :global(.ant-segmented-item) { - font-size: 12px; - padding: 2px 8px; - height: 26px; - line-height: 26px; - display: flex; - align-items: center; - justify-content: center; - } - - :global(.ant-segmented-item-selected) { - background-color: #1890ff; - color: #fff; - } - } - } - - .deviceStatusChart { - position: absolute; - top: 35px; - left: 10px; - right: 10px; - bottom: 10px; - z-index: 10; - } - - // .block1Chart { - // width: 100%; - // height: 100%; - // margin-top: 20px; - - // .mapImage { - // margin-top: 7%; - // width: 90%; - // height: 77%; - // object-fit: cover; - // border-radius: 4px; - // display: block; - // margin-left: auto; - // margin-right: auto; - // } - // } - } - - .middleBlock12 { - flex: 1; - height: 100%; - background-color: #fff; - display: flex; - flex-direction: column; - font-family: PingFang SC; - font-size: 14px; - color: #333333; - padding: 5px 10px 5px 10px; - position: relative; - - .block1Header { - position: absolute; - top: 5px; - left: 10px; - right: 10px; - display: flex; - justify-content: space-between; - align-items: center; - z-index: 10; - - .block1Title { - display: flex; - align-items: center; - gap: 8px; - font-weight: 500; - font-size: 14px; - color: #333333; - - .titleIcon { - width: 3px; - height: 14px; - background-color: #2E4CD4; - } - } - - .block1Segmented { - padding: 0; - margin: 0; - border: 1px solid #E3E3E3; - border-radius: 4px; - height: 28px; - - :global(.ant-segmented) { - padding: 0; - margin: 0; - height: 28px; - } - - :global(.ant-segmented-item) { - font-size: 12px; - padding: 2px 8px; - height: 26px; - line-height: 26px; - display: flex; - align-items: center; - justify-content: center; - } - - :global(.ant-segmented-item-selected) { - background-color: #1890ff; - color: #fff; - } - } - - .customSelect { - :global(.ant-select-single:not(.ant-select-customize-input) .ant-select-selector) { - height: 26px !important; - display: flex !important; - align-items: center !important; - } - - :global(.ant-select-selection-item) { - line-height: 24px !important; - // height: 24px !important; - display: flex !important; - align-items: center !important; - } - } - } - - .deviceStatusChart { - position: absolute; - top: 35px; - left: 10px; - right: 10px; - bottom: 10px; - z-index: 10; - } - } - - .middleBlock2 { - flex: 1; - height: 100%; - // background: linear-gradient(170.5deg, #EBEFF4 6.87%, #FFFFFF 53.01%); - // border: 2px solid #fff; - background-color: #fff; - // border-radius: 4px; - display: flex; - flex-direction: column; - font-family: PingFang SC; - font-size: 14px; - color: #333333; - padding: 5px 10px 5px 10px; - - .middleBlock2Title { - display: flex; - justify-content: space-between; - align-items: center; - // margin-bottom: 10px; - - .titleLeft { - display: flex; - align-items: center; - gap: 8px; - font-weight: 500; - font-size: 14px; - color: #333333; - - .titleIcon { - width: 3px; - height: 14px; - background-color: #2E4CD4; - } - } - - .titleRight { - display: flex; - align-items: center; - gap: 8px; - font-size: 12px; - color: #666; - } - } - - .middleBlock2Chart { - width: 100%; - height: 100%; - // min-height: 200px; - } - } - - } - } - - // 第三个div - 高度不超过45% - .RcontainerBottom { - height: 45%; // 限制高度不超过45% - max-height: 45%; // 确保最大高度不超过45% - display: flex; - flex-direction: column; - - .sectionContent { - display: flex; - flex-direction: row; - gap: 10px; - padding: 0; - - .leftBlock { - width: 28%; - flex-shrink: 0; - height: 100%; - background: #fff; - // background-size: cover; - padding: 0; - display: flex; - flex-direction: column; - gap: 10px; - padding: 15px; - - .leftBlockTitle { - display: flex; - align-items: center; - gap: 8px; - font-family: PingFang SC; - font-weight: 500; - font-size: 14px; - color: #333333; - margin-bottom: 10px; - - .titleIcon { - width: 3px; - height: 16px; - background-color: #2E4CD4; - } - } - - .developmentContainer { - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - gap: 8px; - - .developmentBlock1 { - flex: 1; - background-color: #F1F7FF; - border-radius: 4px; - padding: 15px 20px; - display: flex; - align-items: center; - width: 100%; - - .leftContent { - flex: 1; - display: flex; - flex-direction: column; - gap: 8px; - min-width: 0; - - .mainText { - color: #333333; - font-size: 14px; - font-weight: 500; - font-family: PingFang SC; - width: 100%; - max-width: 500px; - } - - .subText { - color: #666666; - font-size: 12px; - font-weight: 400; - font-family: PingFang SC; - width: 100%; - max-width: 400px; - } - } - - .rightContent { - flex: 0 0 auto; - display: flex; - justify-content: flex-end; - align-items: center; - padding-right: 10px; - min-width: 80px; - - .importantTag { - background-color: #FFE0E2; - color: #FF3E48; - font-size: 14px; - font-weight: 500; - font-family: PingFang SC; - width: 45px; - height: 25px; - display: flex; - align-items: center; - justify-content: center; - border-radius: 4px; - } - - .normalTag { - background-color: #DAF3FF; - color: #00AAFA; - font-size: 14px; - font-weight: 500; - font-family: PingFang SC; - width: 45px; - height: 25px; - - display: flex; - align-items: center; - justify-content: center; - border-radius: 4px; - } - } - } - } - } - - .rightBlock { - width: calc(100% - 28% - 10px); - height: 100%; - background-color: #fff; - padding: 0; - display: flex; - flex-direction: column; - - .tableHeader { - display: flex; - justify-content: space-between; - align-items: center; - padding: 8px 15px 5px 15px; - - .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; - margin-top: 5px; - - .actionButton { - display: flex; - align-items: center; - gap: 4px; - height: 28px; - border: 1px solid #DFE4F6; - border-radius: 4px; - color: #2E4CD4; - font-weight: 500; - font-size: 12px; - padding: 0px 8px; - background: transparent; - cursor: pointer; - transition: all 0.2s ease; - - &:hover { - background-color: #f0f2ff; - border-color: #2E4CD4; - } - - &:active { - background-color: #e6ebff; - } - - .buttonIcon { - font-size: 14px; - font-weight: bold; - } - } - } - } - - .tableContainer { - flex: 1; - overflow: hidden; - margin: 10px 15px 0 15px; // 上边距10px，左右边距15px - - :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; - color: #666666; - } - - :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/nav_system_content/SystemContentList.js b/src/pages/nav_system_content/SystemContentList.js index 70c0bd2..ad7c97a 100644 --- a/src/pages/nav_system_content/SystemContentList.js +++ b/src/pages/nav_system_content/SystemContentList.js @@ -9,7 +9,6 @@ import { userInfo } from '@/utils/globalCommon' import { HomeOutlined, LogoutOutlined, AppstoreOutlined, UserOutlined, SettingOutlined, DatabaseOutlined, FileTextOutlined, LockOutlined, AreaChartOutlined, CaretDownOutlined, BellOutlined, SearchOutlined, QuestionCircleOutlined } from '@ant-design/icons' import { getPageQuery } from '@/utils/utils' import menuTitle from '@/assets/img/智能管控平台.svg' -import menuTitle1 from '@/assets/img/智能管控平台-1.svg' import fireHydrant from '@/assets/img/fireHydrant.svg' import fireHydrant1 from '@/assets/img/fireHydrant1.svg' import fireKeynoteArea from '@/assets/img/fire_keynote_area.svg' @@ -96,7 +95,7 @@ const SystemContentList = (props) => { path: '/topnavbar00/business/basic', icon: 基础信息管理 { }} />, key: "/topnavbar00/business/basic", - "label": "基础信息管理" + "label": "信息管理" }, ] setMenuItems(fixedMenuItems) @@ -195,10 +194,12 @@ const SystemContentList = (props) => { >
- menuTitle - menuTitle1 + menuTitle + 智能管控平台
{ style={{ width: 192, height: 42, - borderColor: '#3D81FF', - backgroundColor: '#003AA7', + borderColor: '#008F8E', + backgroundColor: '#00666599', borderRadius: 0, color: '#fff', fontSize: 22, @@ -222,8 +223,8 @@ const SystemContentList = (props) => { { value: '储运管理系统', label: '储运管理系统' } ]} dropdownStyle={{ - backgroundColor: '#003AA7', - borderColor: '#3D81FF' + backgroundColor: '#00666599', + borderColor: '#008F8E' }} popupClassName="custom-select-dropdown" className="custom-select" @@ -233,9 +234,10 @@ const SystemContentList = (props) => {