diff --git a/src/assets/business_basic/ssbj1.svg b/src/assets/business_basic/ssbj1.svg new file mode 100644 index 0000000..3e59c5c --- /dev/null +++ b/src/assets/business_basic/ssbj1.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/business_basic/ssbj2.svg b/src/assets/business_basic/ssbj2.svg new file mode 100644 index 0000000..d72e292 --- /dev/null +++ b/src/assets/business_basic/ssbj2.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/assets/business_basic/ssbj3.svg b/src/assets/business_basic/ssbj3.svg new file mode 100644 index 0000000..be58394 --- /dev/null +++ b/src/assets/business_basic/ssbj3.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/business_basic/ssbj4.svg b/src/assets/business_basic/ssbj4.svg new file mode 100644 index 0000000..dd9ca3c --- /dev/null +++ b/src/assets/business_basic/ssbj4.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/pages/business_firewarning/components/RealtimeMonitoring.js b/src/pages/business_firewarning/components/RealtimeMonitoring.js index c52a6b4..f87b54e 100644 --- a/src/pages/business_firewarning/components/RealtimeMonitoring.js +++ b/src/pages/business_firewarning/components/RealtimeMonitoring.js @@ -4,25 +4,21 @@ import { CheckCircleOutlined, ExportOutlined } from '@ant-design/icons'; import * as echarts from 'echarts'; import StandardTable from '@/components/StandardTable'; import styles from './RealtimeMonitoring.less'; -// import './RealtimeMonitoring.less'; - 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'; import eqicon2 from '@/assets/business_basic/iconre1.svg'; import eqicon3 from '@/assets/business_basic/iconre2.svg'; import eqicon4 from '@/assets/business_basic/iconre3.svg'; -// import eqicon4 from '@/assets/business_basic/iconre1.svg'; - +import ssbj1 from '@/assets/business_basic/ssbj1.svg'; +import ssbj2 from '@/assets/business_basic/ssbj2.svg'; +import ssbj3 from '@/assets/business_basic/ssbj3.svg'; +import ssbj4 from '@/assets/business_basic/ssbj4.svg'; const RealtimeMonitoring = () => { 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); @@ -100,73 +96,6 @@ const RealtimeMonitoring = () => { } }, []); - // 故障类型饼图初始化 - 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) { @@ -204,25 +133,38 @@ const RealtimeMonitoring = () => { 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'], + data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], axisLabel: { fontSize: 10 + }, + splitLine: { + show: true, + lineStyle: { + type: 'dashed' + } } }, yAxis: { type: 'value', min: 0, - max: 30, + max: 10, + interval: 2, axisLabel: { formatter: '{value}', fontSize: 10 + }, + splitLine: { + show: true, + lineStyle: { + type: 'dashed' + } } }, series: [ { - name: '消防水泵1', + name: '故障报警', type: 'line', - smooth: false, + smooth: true, lineStyle: { width: 2, color: '#8979FF' @@ -247,15 +189,15 @@ const RealtimeMonitoring = () => { borderColor: '#8979FF', borderWidth: 1 }, - data: [12, 15, 18, 14, 16, 20, 22, 19, 17, 21, 23, 25] + data: [3, 5, 4, 6, 7, 5, 4] }, { - name: '消防水泵2', + name: '火灾报警', type: 'line', - smooth: false, + smooth: true, lineStyle: { width: 2, - color: '#3CC3DF' + color: '#FF928A' }, areaStyle: { color: { @@ -265,8 +207,8 @@ const RealtimeMonitoring = () => { x2: 0, y2: 1, colorStops: [ - { offset: 0, color: 'rgba(60, 195, 223, 0.3)' }, - { offset: 1, color: 'rgba(60, 195, 223, 0.05)' } + { offset: 0, color: 'rgba(255, 146, 138, 0.3)' }, + { offset: 1, color: 'rgba(255, 146, 138, 0.05)' } ] } }, @@ -274,10 +216,10 @@ const RealtimeMonitoring = () => { symbolSize: 4, itemStyle: { color: '#fff', - borderColor: '#3CC3DF', + borderColor: '#FF928A', borderWidth: 1 }, - data: [8, 11, 14, 10, 13, 17, 19, 16, 14, 18, 20, 22] + data: [2, 3, 4, 3, 5, 4, 3] } ] }; @@ -445,9 +387,9 @@ const RealtimeMonitoring = () => { width: 140, render: (_, record) => (
- -
- + {/* 设备状态饼图 */}
- +
-
-
-
- 设备故障类型分布 -
-