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..d9a7b5d 100644 --- a/src/pages/business_firewarning/components/RealtimeMonitoring.js +++ b/src/pages/business_firewarning/components/RealtimeMonitoring.js @@ -1,28 +1,24 @@ import React, { useEffect, useRef, useState } from 'react'; -import { Card, Result, Select, Button, Segmented } from 'antd'; -import { CheckCircleOutlined, ExportOutlined } from '@ant-design/icons'; +import { Card, Result, Select, Button, Segmented ,Input} from 'antd'; +import { CheckCircleOutlined, ExportOutlined, SearchOutlined } 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] } ] }; @@ -397,13 +339,7 @@ const RealtimeMonitoring = () => { width: 110, }, { - title: '型号规格', - dataIndex: 'modelSpec', - key: 'modelSpec', - width: 140, - }, - { - title: '安装位置', + title: '所在位置', dataIndex: 'installLocation', key: 'installLocation', width: 200, @@ -445,20 +381,9 @@ const RealtimeMonitoring = () => { width: 140, render: (_, record) => (
- -
- + {/* 设备状态饼图 */}
- +
-
-
-
- 设备故障类型分布 -
- } + /> +
diff --git a/src/pages/business_firewarning/components/RealtimeMonitoring.less b/src/pages/business_firewarning/components/RealtimeMonitoring.less index a180251..be59fd7 100644 --- a/src/pages/business_firewarning/components/RealtimeMonitoring.less +++ b/src/pages/business_firewarning/components/RealtimeMonitoring.less @@ -153,34 +153,7 @@ } } - // .realtimeBlock1Segmented { - // 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; - // } - // } + } .realtimeDeviceStatusChart { @@ -194,96 +167,257 @@ } .realtimeMiddleBlock12 { - // flex: 1; width: 30%; 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; - .realtimeBlock1Header { - position: absolute; - top: 5px; - left: 10px; - right: 10px; + .parameterTitle { display: flex; - justify-content: space-between; align-items: center; - z-index: 10; + gap: 8px; + padding: 5px 10px 10px 10px; + font-size: 14px; + font-weight: 500; + color: #333; - .realtimeBlock1Title { + .realtimeTitleIcon { + width: 3px; + height: 14px; + background-color: #2E4CD4; + } + } + + + .parameterGridContainer { + display: flex; + flex-direction: column; + gap: 10px; + margin: 0 10px 10px 10px; + height: 100%; // 减去title高度和margin + + .parameterRow { display: flex; - align-items: center; - gap: 8px; - font-weight: 500; - font-size: 14px; - color: #333333; + gap: 10px; + flex: 1; - .realtimeTitleIcon { - width: 3px; - height: 14px; - background-color: #2E4CD4; - } - } + .parameterBlock1 { + flex: 1 1 50%; + background-color: #FFF5E9; + border: 1px solid #ECEDFC; + border-radius: 2px; + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + padding: 10px; + + .warningBadge { + position: absolute; + top: 0; + right: 0; + width: 35px; + height: 20px; + background-color: #FF8800; + border-radius: 2px; + display: flex; + align-items: center; + justify-content: center; + font-size: 12px; + color: #fff; + font-weight: 420; + } - .realtimeBlock1Segmented { - padding: 0; - margin: 0; - border: 1px solid #E3E3E3; - border-radius: 4px; - height: 28px; + .blockContent { + display: flex; + flex-direction: column; + gap: 5px; + margin-left: 5px; + font-family: PingFang SC; - :global(.ant-segmented) { - padding: 0; - margin: 0; - height: 28px; + .parameterName { + font-size: 10px; + color: #666666; + font-weight: 400; + } + + .parameterValue { + font-size: 16px; + color: #333333; + font-weight: 500; + } + + .parameterRange { + font-size: 10px; + color: #666666; + font-weight: 400; + } + } } - :global(.ant-segmented-item) { - font-size: 12px; - padding: 2px 8px; - height: 26px; - line-height: 26px; + .parameterBlock2 { + flex: 1 1 50%; + background-color: #F3FFF6; + border: 1px solid #ECEDFC; + border-radius: 2px; + position: relative; display: flex; - align-items: center; + flex-direction: column; justify-content: center; - } + padding: 10px; + + .warningBadge { + position: absolute; + top: 0; + right: 0; + width: 35px; + height: 20px; + background-color: #44BB5F; + border-radius: 2px; + display: flex; + align-items: center; + justify-content: center; + font-size: 12px; + color: #fff; + font-weight: 420; + } + + .blockContent { + display: flex; + flex-direction: column; + gap: 5px; + margin-left: 5px; + font-family: PingFang SC; - :global(.ant-segmented-item-selected) { - background-color: #1890ff; - color: #fff; + .parameterName { + font-size: 10px; + color: #666666; + font-weight: 400; + } + + .parameterValue { + font-size: 16px; + color: #333333; + font-weight: 500; + } + + .parameterRange { + font-size: 10px; + color: #666666; + font-weight: 400; + } + } } - } - .realtimeCustomSelect { - :global(.ant-select-single:not(.ant-select-customize-input) .ant-select-selector) { - height: 26px !important; - display: flex !important; - align-items: center !important; + .parameterBlock3 { + flex: 1; + background-color: #F3FFF6; + border: 1px solid #ECEDFC; + border-radius: 2px; + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + padding: 10px; + + .warningBadge { + position: absolute; + top: 0; + right: 0; + width: 35px; + height: 20px; + background-color: #44BB5F; + border-radius: 2px; + display: flex; + align-items: center; + justify-content: center; + font-size: 12px; + color: #fff; + font-weight: 420; + } + + .blockContent { + display: flex; + flex-direction: column; + gap: 5px; + margin-left: 5px; + font-family: PingFang SC; + + .parameterName { + font-size: 10px; + color: #666666; + font-weight: 400; + } + + .parameterValue { + font-size: 16px; + color: #333333; + font-weight: 500; + } + + .parameterRange { + font-size: 10px; + color: #666666; + font-weight: 400; + } + } } - :global(.ant-select-selection-item) { - line-height: 24px !important; - // height: 24px !important; - display: flex !important; - align-items: center !important; + .parameterBlock4 { + flex: 1; + background-color: #FFF2F1; + border: 1px solid #ECEDFC; + border-radius: 2px; + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + padding: 10px; + + .warningBadge { + position: absolute; + top: 0; + right: 0; + width: 35px; + height: 20px; + background-color: #FF2526; + border-radius: 2px; + display: flex; + align-items: center; + justify-content: center; + font-size: 12px; + color: #fff; + font-weight: 400; + } + + .blockContent { + display: flex; + flex-direction: column; + gap: 5px; + margin-left: 5px; + + .parameterName { + font-size: 10px; + color: #666666; + font-weight: 400; + } + + .parameterValue { + font-size: 16px; + color: #333333; + font-weight: 500; + } + + .parameterRange { + font-size: 10px; + color: #666666; + font-weight: 400; + } + } } } } - - .realtimeDeviceStatusChart { - position: absolute; - top: 35px; - left: 10px; - right: 10px; - bottom: 10px; - z-index: 10; - } } .realtimeMiddleBlock2 { @@ -303,6 +437,13 @@ align-items: center; // margin-bottom: 10px; + + .realtimeTitleIcon { + width: 3px; + height: 14px; + background-color: #2E4CD4; + } + .realtimeTitleLeft { display: flex; align-items: center; @@ -311,11 +452,6 @@ font-size: 14px; color: #333333; - .realtimeTitleIcon { - width: 3px; - height: 14px; - background-color: #2E4CD4; - } } } @@ -386,6 +522,16 @@ display: flex; align-items: center; width: 100%; + } + + .realtimeDevelopmentBlockA { + flex: 1; + background-color: #FFF0EF; + border-radius: 4px; + padding: 15px 20px; + display: flex; + align-items: center; + width: 100%; .realtimeLeftContent { flex: 1; @@ -413,43 +559,117 @@ } } - .realtimeRightContent { - flex: 0 0 auto; + } + + .realtimeDevelopmentBlockB { + flex: 1; + background-color: #FFF3DA; + border-radius: 4px; + padding: 15px 20px; + display: flex; + align-items: center; + width: 100%; + + .realtimeLeftContent { + flex: 1; display: flex; - justify-content: flex-end; - align-items: center; - padding-right: 10px; - min-width: 80px; + flex-direction: column; + gap: 8px; + min-width: 0; - .realtimeImportantTag { - background-color: #FFE0E2; - color: #FF3E48; + .realtimeMainText { + color: #333333; 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; + width: 100%; + max-width: 500px; + } + + .realtimeSubText { + color: #666666; + font-size: 12px; + font-weight: 400; + font-family: PingFang SC; + width: 100%; + max-width: 400px; + } + } + + } + + .realtimeDevelopmentBlockC { + flex: 1; + background-color: #FFF0EF; + border-radius: 4px; + padding: 15px 20px; + display: flex; + align-items: center; + width: 100%; + + .realtimeLeftContent { + flex: 1; + display: flex; + flex-direction: column; + gap: 8px; + min-width: 0; + + .realtimeMainText { + color: #333333; + font-size: 14px; + font-weight: 500; + font-family: PingFang SC; + width: 100%; + max-width: 500px; + } + + .realtimeSubText { + color: #666666; + font-size: 12px; + font-weight: 400; + font-family: PingFang SC; + width: 100%; + max-width: 400px; } + } + + } - .realtimeNormalTag { - background-color: #DAF3FF; - color: #00AAFA; + .realtimeDevelopmentBlockD { + flex: 1; + background-color: #FFF3DA; + border-radius: 4px; + padding: 15px 20px; + display: flex; + align-items: center; + width: 100%; + + .realtimeLeftContent { + flex: 1; + display: flex; + flex-direction: column; + gap: 8px; + min-width: 0; + + .realtimeMainText { + color: #333333; font-size: 14px; font-weight: 500; font-family: PingFang SC; - width: 45px; - height: 25px; + width: 100%; + max-width: 500px; + } - display: flex; - align-items: center; - justify-content: center; - border-radius: 4px; + .realtimeSubText { + color: #666666; + font-size: 12px; + font-weight: 400; + font-family: PingFang SC; + width: 100%; + max-width: 400px; } } + } } } @@ -495,9 +715,9 @@ gap: 4px; height: 28px; border: 1px solid #DFE4F6; - border-radius: 4px; + border-radius: 2px; color: #2E4CD4; - font-weight: 500; + font-weight: 400; font-size: 12px; padding: 0px 8px; background: transparent; diff --git a/src/pages/nav_system_content/SystemContentList.js b/src/pages/nav_system_content/SystemContentList.js index a04bbbb..5240fc3 100644 --- a/src/pages/nav_system_content/SystemContentList.js +++ b/src/pages/nav_system_content/SystemContentList.js @@ -59,6 +59,7 @@ const CustomMenuItem = ({ item, selectedKeys }) => { return renderMenuItem(item); }; + const SystemContentList = (props) => { const dynamicRoute = window.dynamicRoute console.log(dynamicRoute) @@ -157,6 +158,11 @@ const SystemContentList = (props) => { history.replace(curKey) } + const selectChange = (value) => { + console.log(value) + window.location.href = 'http://localhost:8888/' + } + // 切换菜单收缩状态 const toggleMenu = () => { setIsMenuCollapsed(!isMenuCollapsed); @@ -228,7 +234,7 @@ const SystemContentList = (props) => { }}>