-
- {/* 块1 */}
-
{
- console.log(value);
- }}
- />
- {/* 设备状态饼图 */}
-
- {/* 重点部位列表 */}
-
使用次数: ${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: '#FFFFFF', - 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) => ( -
-
-
- {/* 块2 */}
-
-
- 演练记录总数
- 120
-
- 
-
-
-
-
- {/* 块3 */}
-
-
- 重点部位数量
- 32
-
- 
-
-
-
-
-
- 参与演练人员
- 69
-
- 
+
@@ -606,76 +469,103 @@ const EmergencyPlanAssociation = () => {
+
+
-
- {/* 块4 */}
-
+
+
应急预案关联管理功能组成图
-
-
- 平均演练达标率
- 72%
-
- 
-
+
+ })
-
-
- 重点部位分布图
-
- 实时定位
+
预案调用统计
- {/* 地图图片 */}
- })
-
+
-
- 重点部位类型分布
+ 关联应急预案
-
+ {/* 关联应急预案列表 */}
+
-
+ {[
+ {
+ title: '电气火灾应急预案',
+ desc: '适用场景: 电气短路、设备过载引发的火灾',
+ update: '2023-05-07',
+ user: '张正',
+ },
+ {
+ title: '精密设备防水防潮应急预案',
+ desc: '适用场景: 电气短路、设备过载引发的火灾',
+ update: '2023-05-07',
+ user: '张正',
+ },
+ {
+ title: '精密设备防水防潮应急预案',
+ desc: '适用场景: 电气短路、设备过载引发的火灾',
+ update: '2023-05-07',
+ user: '张正',
+ }
+ ].map((item, idx) => (
+
+
+ ))}
+
+ {item.title}
+ {item.desc}
+ 上次修订：{item.update} | 修订人：{item.user}
+
+
+
+
+
+
+
- 重点部位列表
+ 预案更新通知
- 共 3 项
- {keypartsData.map((item, idx) => (
-
@@ -746,4 +636,4 @@ const EmergencyPlanAssociation = () => {
);
};
-export default EmergencyPlanAssociation;
\ No newline at end of file
+export default EmergencyPlanAssociation;
\ No newline at end of file
diff --git a/src/pages/business_firekeynotearea/components/EmergencyPlanAssociation.less b/src/pages/business_firekeynotearea/components/EmergencyPlanAssociation.less
index 053e850..88bea22 100644
--- a/src/pages/business_firekeynotearea/components/EmergencyPlanAssociation.less
+++ b/src/pages/business_firekeynotearea/components/EmergencyPlanAssociation.less
@@ -1,70 +1,96 @@
-// 重点部位列表样式
-.keypartsList {
+// 关联应急预案卡片列表样式
+.planListWrap {
display: flex;
flex-direction: column;
- gap: 10px;
- height: 200px;
+ gap: 8px;
margin: 35px 0 0 0;
+ height: 200px;
overflow: auto;
+ /* 隐藏滚动条但保留滚动效果 */
+ scrollbar-width: none;
}
-.keypartsCard {
- background: #f9fbff;
- border: 1px solid #ECEDFC;
+.planListWrap::-webkit-scrollbar {
+ display: none;
+ /* Chrome/Safari */
+}
+
+.planCard {
+ background: #F1F7FF;
+ // border: 1px solid #ecedfc;
border-radius: 4px;
- padding: 8px 12px 6px 12px;
+ padding: 10px 12px;
box-shadow: 0 1px 4px 0 rgba(46, 76, 212, 0.03);
- transition: border-color 0.2s, box-shadow 0.2s;
- position: relative;
- // min-height: 44px;
- max-width: 300px;
- width: 100%;
- margin: 0 auto;
+ display: flex;
+ gap: 8px;
+}
+
+.planCardTitle {
+ font-size: 14px;
+ font-weight: 600;
+ color: #333;
+ margin-bottom: 6px;
+}
+
+.planCardDesc {
+ font-size: 12px;
+ color: #666;
+ margin-bottom: 6px;
+}
+
+.planCardFooter {
display: flex;
justify-content: space-between;
align-items: center;
+ margin-top: 6px;
+}
+
+.planCardUpdate {
+ font-size: 12px;
+ color: #666;
}
-.keypartsCardActive {
- border-color: #75A7FF;
- background: #F6F7FF;
- box-shadow: 0 2px 8px 0 rgba(46, 76, 212, 0.10);
+.planCardBtns {
+ display: flex;
+ gap: 10px;
}
-.keypartsCardHeader {
+.quickBtn {
+ background: #1169FF !important;
+ color: #fff;
+ border: none;
+ border-radius: 4px;
+ font-size: 12px !important;
+ font-weight: 500;
+ padding: 0 12px;
display: flex;
align-items: center;
- justify-content: space-between;
- margin-bottom: 3px;
}
-.keypartsCardTitle {
- font-size: 12px;
- font-weight: 600;
- color: #333;
- margin-bottom: 8px;
+.quickBtn:hover {
+ background: #1169FF;
+ color: #fff;
}
-.keypartsRiskTag {
- display: inline-block;
- min-width: 40px;
- height: 30px;
- line-height: 30px;
- text-align: center;
- font-size: 13px;
+.delBtn {
+ background: #FE5F60 !important;
+ color: #fff;
+ border: none;
+ border-radius: 4px;
+ font-size: 12px !important;
font-weight: 500;
- border-radius: 5px;
- padding: 0 8px;
- box-shadow: 0 1px 3px 0 rgba(46, 76, 212, 0.05);
+ padding: 0 12px;
+ display: flex;
+ align-items: center;
}
-.keypartsCardSub {
- font-size: 12px;
- color: #666;
- font-weight: 400;
- letter-spacing: 0.5px;
+.delBtn:hover {
+ background: #d9363e;
+ color: #fff;
}
+// 重点部位列表样式
+
.Rcontainer {
padding: 8px 6px 0px 6px;
height: 100%;
@@ -72,126 +98,71 @@
flex-direction: column;
gap: 10px;
- // 第一个div - 高度20%
.RcontainerTop {
- height: 16%;
- // background-color: #fff;
+ height: 100%;
border-radius: 4px;
display: flex;
- flex-direction: column;
+ // flex-direction: column;
+ background: url('@/assets/business_firekeynotearea/yj-bg.png') no-repeat center center;
+ background-size: cover;
.sectionContent {
+ width: 100%;
height: 100%;
- display: flex;
- flex-direction: column;
- // padding: 15px;
+ gap: 10px;
- .blocksContainer {
- flex: 1;
- display: flex;
- gap: 10px;
+ .topBlock {
height: 100%;
+ display: flex;
+ flex-direction: column;
+ font-family: PingFang SC;
+ font-size: 14px;
+ color: #333333;
+ padding: 5px 10px 5px 10px;
- .blockItem {
- flex: 1;
- height: 100%;
+ .topBlockTitle {
display: flex;
- background: linear-gradient(170.5deg, #F5F7FF 6.87%, #FFFFFF 47.65%);
- border-radius: 2px;
- // border: 2px solid #FFFFFF;
-
- &.bgBlock1 {
- background: url('@/assets/business_firekeynotearea/keyparts_bg.png') no-repeat center center, linear-gradient(170.5deg, #F5F7FF 6.87%, #FFFFFF 47.65%);
- background-size: cover;
- }
-
- &.bgBlock2 {
- background: url('@/assets/business_firekeynotearea/keyparts_bg.png') no-repeat center center, linear-gradient(170.5deg, #F5F7FF 6.87%, #FFFFFF 47.65%);
- background-size: cover;
- }
-
- &.bgBlock3 {
- background: url('@/assets/business_firekeynotearea/keyparts_bg.png') no-repeat center center, linear-gradient(170.5deg, #F5F7FF 6.87%, #FFFFFF 47.65%);
- background-size: cover;
- }
-
- &.bgBlock4 {
- background: url('@/assets/business_firekeynotearea/keyparts_bg.png') no-repeat center center, linear-gradient(170.5deg, #F5F7FF 6.87%, #FFFFFF 47.65%);
- background-size: cover;
- }
-
- &.bgBlock5 {
- background: url('@/assets/business_firekeynotearea/keyparts_bg.png') no-repeat center center, linear-gradient(170.5deg, #F5F7FF 6.87%, #FFFFFF 47.65%);
- background-size: cover;
- }
+ justify-content: space-between;
+ align-items: center;
+ // margin-bottom: 10px;
- .blockLeft {
- width: 60%;
- height: 100%;
+ .titleLeft {
display: flex;
- flex-direction: column;
- justify-content: center;
- padding: 15px;
- padding-left: 20px;
- gap: 15px;
-
- .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;
- }
+ align-items: center;
+ gap: 8px;
+ font-weight: 500;
+ font-size: 14px;
+ color: #333333;
- .checkIcon {
- font-size: 16px;
- color: #1269FF;
- }
+ .titleIcon {
+ width: 3px;
+ height: 14px;
+ background-color: #2E4CD4;
}
}
- .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;
- }
+ .titleRight {
+ font-size: 12px;
+ width: 60px;
+ height: 20px;
+ line-height: 20px;
+ background-color: #E6E9FB;
+ color: #2E4CD4;
+ text-align: center;
+ border-radius: 2px;
}
}
+
+ .topBlockBg {
+ width: 100%;
+ height: 100%;
+ padding: 5px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
}
+
}
}
@@ -205,22 +176,18 @@
.sectionContent {
height: 100%;
display: flex;
- display: flex;
gap: 10px;
- height: 100%;
-
-
.middleBlock1 {
- // flex: 3;
- width: 28%;
+ flex: 4;
+ // width: 28%;
height: 100%;
background: #fff;
border: 2px solid #fff;
// border-radius: 4px;
position: relative;
- padding: 0px 10px 10px 2px;
+ padding: 0px 10px 10px 10px;
font-family: PingFang SC;
font-size: 14px;
color: #333333;
@@ -290,27 +257,10 @@
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;
- // }
- // }
}
.middleBlock2 {
- flex: 6;
+ flex: 4;
height: 100%;
// background: linear-gradient(170.5deg, #EBEFF4 6.87%, #FFFFFF 53.01%);
// border: 2px solid #fff;
@@ -327,6 +277,8 @@
display: flex;
justify-content: space-between;
align-items: center;
+ line-height: 28px;
+ height: 28px;
// margin-bottom: 10px;
.titleLeft {
diff --git a/src/pages/business_firekeynotearea/components/EvaluationReport.js b/src/pages/business_firekeynotearea/components/EvaluationReport.js
deleted file mode 100644
index 1d61812..0000000
--- a/src/pages/business_firekeynotearea/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} setSelectedKeypartIdx(idx)}
- style={{ cursor: 'pointer' }}
- >
-
@@ -688,7 +578,7 @@ const EmergencyPlanAssociation = () => {
-
- {item.name}
-
- {item.location}
+ {/* 预案更新通知列表 */}
+
+ {[
+ {
+ title: '电气火灾应急预案已更新',
+ desc: '该预案已修订，涉及数据机房A区等3个重点部位需要同步更新',
+ time: '10分钟',
+ },
+ {
+ title: '仓库物品堆放安全管理预案已发布',
+ desc: '新预案适用于各类仓库区域，建议进行关联',
+ time: '20分钟',
+ },
+ {
+ title: '防汛应急预案年度修订提醒',
+ desc: '距离防汛应急预案下次修订时间还有30天',
+ time: '40分钟',
+ }
+ ].map((item, idx) => (
+
-
+
-
+
- {item.title}
+ {item.desc}
- {item.risk}
+
))}
+
+ {item.time}
+
-
演练记录录入
+ 组织架构管理
@@ -697,7 +587,7 @@ const EmergencyPlanAssociation = () => {
@@ -705,13 +595,13 @@ const EmergencyPlanAssociation = () => {
{/* 下拉选择 */}
{/* 新增按钮 */}
使用次数: ${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: '#FFFFFF', - 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% */}
-
- );
-};
-
-export default EvaluationReport;
diff --git a/src/pages/business_firekeynotearea/components/EvaluationReport.less b/src/pages/business_firekeynotearea/components/EvaluationReport.less
deleted file mode 100644
index e62182a..0000000
--- a/src/pages/business_firekeynotearea/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_firekeynotearea/components/KeypartsBasicInformation.less b/src/pages/business_firekeynotearea/components/KeypartsBasicInformation.less
index 76d5e91..ca9371b 100644
--- a/src/pages/business_firekeynotearea/components/KeypartsBasicInformation.less
+++ b/src/pages/business_firekeynotearea/components/KeypartsBasicInformation.less
@@ -8,11 +8,6 @@
.treeSearchInput {
width: 100%;
height: 36px;
- // border-radius: 6px;
- // border: 1px solid #E3E6EB;
- // font-size: 14px;
- // margin-bottom: 10px;
- // background: #F7F8FA;
}
.customTree {
@@ -70,7 +65,7 @@
display: flex;
align-items: center;
justify-content: space-between;
- margin: 10px 15px 0 15px;
+ margin: 0 15px;
height: 40px;
}
@@ -123,7 +118,6 @@
flex-direction: column;
gap: 10px;
- // 第一个div - 高度20%
.RcontainerTop {
height: 16%;
// background-color: #fff;
@@ -246,265 +240,6 @@
}
}
- // 第二个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 - 占满剩余空间
.RcontainerBottom {
flex: 1 1 0;
min-height: 0;
@@ -533,7 +268,7 @@
display: flex;
justify-content: space-between;
align-items: center;
- padding: 8px 15px 5px 15px;
+ padding: 8px 15px 0px 15px;
.tableTitle {
display: flex;
@@ -543,7 +278,7 @@
font-weight: 500;
font-size: 14px;
color: #333333;
-
+ line-height: 32px;
.titleIcon {
width: 3px;
height: 16px;
@@ -645,7 +380,8 @@
font-weight: 500;
font-size: 14px;
color: #333333;
- margin-bottom: 10px;
+ padding-top: 8px;
+ line-height: 32px;
.titleIcon {
width: 3px;
diff --git a/src/pages/nav_system_content/SystemContentList.less b/src/pages/nav_system_content/SystemContentList.less
index 4019b6c..93516c5 100644
--- a/src/pages/nav_system_content/SystemContentList.less
+++ b/src/pages/nav_system_content/SystemContentList.less
@@ -69,7 +69,7 @@
display: flex;
flex-direction: column;
height: 100vh;
- overflow: auto;
+ overflow: hidden;
}
.leftMenu {
-
-
- {/* 第2个div - 占满剩余位置 */}
-
-
-
-
-
-
-
- {/* 设备状态饼图 */}
-
-
- 设备使用频率分析
-
-
-
-
-
-
-
-
-
- {/* 维护费用趋势折线图 */}
-
-
- 近一年维护费用趋势
-
-
-
-
-
-
-
-
-
-
- 设备类型占比
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 近期维护提醒
-
-
-
-
-
-
- SH-MHQ-023-C 干粉灭火器
- 位置: 4楼办公区丨维护类型: 季度检查
- 负责人: 张三
-
-
- 3天后到期
-
-
-
-
- SH-XHS-045-D 室内消火栓
- 位置: 2楼东侧走廊丨维护类型: 水压测试
- 负责人: 李四
-
-
- 8天后到期
-
-
-
-
-
- 维护任务进度
-
- {/* 进度条区域 */}
-
-
-
-
- 月度维护计划
-
-
- 季度维护计划
-
-
-
- 年度维护计划
-
-
-
- {/* 警告提示框 */}
-
-
-
-
- {/* 表格 */}
-
-
-
-
-
- {/* 操作按钮 */}
-
-
-
- 消防设施与器材列表
-
-
-
- {/* 表格 */}
-
- }
- />
-
-
-
-
-
-
-
- `共 ${total} 条`,
- }}
- />
-
-