jiangxucong
/
dq-fms
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

设备设施管理页面

Browse Source
main
wangyunfei 3 weeks ago
parent bff116183c
commit 9e6c9bb009
2 changed files with 371 additions and 221 deletions
Show Stats Download Patch File Download Diff File

428
src/pages/business_basic/module/RiskAssessment.js
Unescape Escape View File

@ -1,7 +1,7 @@
import React, { useEffect, useRef, useState } from 'react'; import React, { useEffect, useRef, useState } from 'react';
import { Card, Result, Select, Button, Segmented } from 'antd'; import { Card, Result, Select, Button, Segmented } from 'antd';
import { CheckCircleOutlined } from '@ant-design/icons'; import { CheckCircleOutlined, ExportOutlined } from '@ant-design/icons';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import StandardTable from '@/components/StandardTable'; import StandardTable from '@/components/StandardTable';
import styles from './RiskAssessment.less'; import styles from './RiskAssessment.less';
@ -19,7 +19,7 @@ import eqicon2 from '@/assets/business_basic/eqicon2.png';
import eqicon3 from '@/assets/business_basic/eqicon3.png'; import eqicon3 from '@/assets/business_basic/eqicon3.png';
import eqicon4 from '@/assets/business_basic/eqicon4.png'; import eqicon4 from '@/assets/business_basic/eqicon4.png';
const RiskAssessment = () => { const RiskAssessment = () => {
const chartRef = useRef(null); const chartRef = useRef(null);
const pieChartRef = useRef(null); const pieChartRef = useRef(null);
const faultPieChartRef = useRef(null); const faultPieChartRef = useRef(null);
@ -37,7 +37,7 @@ const RiskAssessment = () => {
useEffect(() => { useEffect(() => {
if (pieChartRef.current) { if (pieChartRef.current) {
const pieChart = echarts.init(pieChartRef.current); const pieChart = echarts.init(pieChartRef.current);
const pieOption = { const pieOption = {
color: ['#44BB5F', '#F8C541', '#A493FB', '#4B69F1', '#949FD0'], color: ['#44BB5F', '#F8C541', '#A493FB', '#4B69F1', '#949FD0'],
legend: { legend: {
@ -105,7 +105,7 @@ const RiskAssessment = () => {
useEffect(() => { useEffect(() => {
if (faultPieChartRef.current) { if (faultPieChartRef.current) {
const faultPieChart = echarts.init(faultPieChartRef.current); const faultPieChart = echarts.init(faultPieChartRef.current);
const faultPieOption = { const faultPieOption = {
color: ['#FF3E48', '#FF8800', '#FFC403'], color: ['#FF3E48', '#FF8800', '#FFC403'],
legend: { legend: {
@ -172,7 +172,7 @@ const RiskAssessment = () => {
useEffect(() => { useEffect(() => {
if (chartRef.current) { if (chartRef.current) {
const chart = echarts.init(chartRef.current); const chart = echarts.init(chartRef.current);
// 强制初始化时调整大小 // 强制初始化时调整大小
setTimeout(() => { setTimeout(() => {
if (chart && !chart.isDisposed()) { if (chart && !chart.isDisposed()) {
@ -205,7 +205,7 @@ const RiskAssessment = () => {
xAxis: { xAxis: {
type: 'category', type: 'category',
boundaryGap: false, 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', '21:00'], 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: { axisLabel: {
fontSize: 10 fontSize: 10
} }
@ -223,7 +223,7 @@ const RiskAssessment = () => {
{ {
name: '消防水泵1', name: '消防水泵1',
type: 'line', type: 'line',
smooth: true, smooth: false,
lineStyle: { lineStyle: {
width: 2, width: 2,
color: '#8979FF' color: '#8979FF'
@ -248,12 +248,12 @@ const RiskAssessment = () => {
borderColor: '#8979FF', borderColor: '#8979FF',
borderWidth: 1 borderWidth: 1
}, },
data: [12, 15, 18, 14, 16, 20, 22, 19, 17, 21, 23, 25, 24] data: [12, 15, 18, 14, 16, 20, 22, 19, 17, 21, 23, 25]
}, },
{ {
name: '消防水泵2', name: '消防水泵2',
type: 'line', type: 'line',
smooth: true, smooth: false,
lineStyle: { lineStyle: {
width: 2, width: 2,
color: '#3CC3DF' color: '#3CC3DF'
@ -278,7 +278,7 @@ const RiskAssessment = () => {
borderColor: '#3CC3DF', borderColor: '#3CC3DF',
borderWidth: 1 borderWidth: 1
}, },
data: [8, 11, 14, 10, 13, 17, 19, 16, 14, 18, 20, 22, 21] data: [8, 11, 14, 10, 13, 17, 19, 16, 14, 18, 20, 22]
} }
] ]
}; };
@ -298,10 +298,10 @@ const RiskAssessment = () => {
} }
}, 50); // 减少延迟时间 }, 50); // 减少延迟时间
}; };
// 监听窗口大小变化 // 监听窗口大小变化
window.addEventListener('resize', handleResize); window.addEventListener('resize', handleResize);
// 监听容器尺寸变化（解决菜单栏伸缩时的自适应问题） // 监听容器尺寸变化（解决菜单栏伸缩时的自适应问题）
let resizeObserver = null; let resizeObserver = null;
if (window.ResizeObserver) { if (window.ResizeObserver) {
@ -333,7 +333,7 @@ const RiskAssessment = () => {
// 使用MutationObserver监听DOM结构变化（菜单展开收起时） // 使用MutationObserver监听DOM结构变化（菜单展开收起时）
const mutationObserver = new MutationObserver((mutations) => { const mutationObserver = new MutationObserver((mutations) => {
mutations.forEach((mutation) => { mutations.forEach((mutation) => {
if (mutation.type === 'attributes' && if (mutation.type === 'attributes' &&
(mutation.attributeName === 'class' || mutation.attributeName === 'style')) { (mutation.attributeName === 'class' || mutation.attributeName === 'style')) {
// 延迟执行，确保DOM更新完成 // 延迟执行，确保DOM更新完成
setTimeout(() => { setTimeout(() => {
@ -377,7 +377,7 @@ const RiskAssessment = () => {
title: '编号', title: '编号',
dataIndex: 'id', dataIndex: 'id',
key: 'id', key: 'id',
width: 80, width: 60,
render: (text, record, index) => { render: (text, record, index) => {
const page = pagination.current || 1; const page = pagination.current || 1;
const pageSize = pagination.pageSize || 5; const pageSize = pagination.pageSize || 5;
@ -389,49 +389,41 @@ const RiskAssessment = () => {
title: '设备编号', title: '设备编号',
dataIndex: 'deviceId', dataIndex: 'deviceId',
key: 'deviceId', key: 'deviceId',
width: 120, width: 140,
}, },
{ {
title: '风险等级', title: '设备名称',
dataIndex: 'riskLevel', dataIndex: 'deviceName',
key: 'riskLevel', key: 'deviceName',
width: 100, width: 110,
render: (text) => {
const colorMap = {
'高': '#FF4D4F',
'中': '#FAAD14',
'低': '#52C41A'
};
return <span style={{ color: colorMap[text] || '#333' }}>{text}</span>;
}
}, },
{ {
title: '预警时间', title: '型号规格',
dataIndex: 'warningTime', dataIndex: 'modelSpec',
key: 'warningTime', key: 'modelSpec',
width: 150, width: 140,
}, },
{ {
title: '主要原因', title: '安装位置',
dataIndex: 'mainReason', dataIndex: 'installLocation',
key: 'mainReason', key: 'installLocation',
width: 200, width: 200,
}, },
{ {
title: '处理状态', title: '状态',
dataIndex: 'status', dataIndex: 'status',
key: 'status', key: 'status',
width: 100, width: 80,
render: (text) => { render: (text) => {
const statusMap = { const statusMap = {
'未处理': { color: '#FF4D4F', bg: '#FFF2F0' }, '故障': { color: '#FF4D4F', bg: '#FFF2F0' },
'处理中': { color: '#FAAD14', bg: '#FFFBE6' }, '预警': { color: '#FAAD14', bg: '#FFF3E9' },
'已处理': { color: '#52C41A', bg: '#F6FFED' } '正常': { color: '#44BB5F', bg: '#D8F7DE' }
}; };
const status = statusMap[text] || { color: '#333', bg: '#F5F5F5' }; const status = statusMap[text] || { color: '#333', bg: '#F5F5F5' };
return ( return (
<span style={{ <span style={{
color: status.color, color: status.color,
backgroundColor: status.bg, backgroundColor: status.bg,
padding: '2px 8px', padding: '2px 8px',
borderRadius: '4px', borderRadius: '4px',
@ -442,16 +434,35 @@ const RiskAssessment = () => {
); );
} }
}, },
{
title: '最后维护',
dataIndex: 'lastMaintenance',
key: 'lastMaintenance',
width: 150,
},
{ {
title: '操作', title: '操作',
key: 'action', key: 'action',
width: 120, width: 140,
render: (_, record) => ( render: (_, record) => (
<div> <div>
<Button type="link" size="small" style={{ padding: 0, marginRight: 8 }}> <Button type="link" size="small" style={{
查看 padding: '2px 8px',
fontSize: 12,
marginRight: 8,
border: '1px solid #E6E9FB',
backgroundColor: 'transparent',
borderRadius: '4px'
}}>
编辑
</Button> </Button>
<Button type="link" size="small" style={{ padding: 0 }}> <Button type="link" size="small" style={{
padding: '2px 8px',
fontSize: 12,
border: '1px solid #E6E9FB',
backgroundColor: 'transparent',
borderRadius: '4px'
}}>
详情 详情
</Button> </Button>
</div> </div>
@ -464,110 +475,122 @@ const RiskAssessment = () => {
{ {
key: '1', key: '1',
id: '001', id: '001',
deviceId: 'DEV-001', deviceId: 'HQ-XF-01-001',
riskLevel: '高', deviceName: '消防水泵',
warningTime: '2024-01-15 08:30:25', modelSpec: 'XBD5.0/30-125',
mainReason: '设备温度异常升高', installLocation: '总部大楼1层大厅',
status: '未处理', status: '故障',
lastMaintenance: '2025-09-10',
}, },
{ {
key: '2', key: '2',
id: '002', id: '002',
deviceId: 'DEV-002', deviceId: 'HQ-XF-01-001',
riskLevel: '中', deviceName: '消防水泵',
warningTime: '2024-01-15 09:15:10', modelSpec: 'XBD5.0/30-125',
mainReason: '压力波动超出正常范围', installLocation: '总部大楼3层 东区',
status: '处理中', status: '预警',
lastMaintenance: '2025-09-10',
}, },
{ {
key: '3', key: '3',
id: '003', id: '003',
deviceId: 'DEV-003', deviceId: 'HQ-XF-01-001',
riskLevel: '高', deviceName: '消防水泵',
warningTime: '2024-01-15 10:45:30', modelSpec: 'XBD5.0/30-125',
mainReason: '液位传感器故障', installLocation: '总部大楼地下一层',
status: '已处理', status: '正常',
lastMaintenance: '2025-09-10',
}, },
{ {
key: '4', key: '4',
id: '004', id: '004',
deviceId: 'DEV-004', deviceId: 'HQ-XF-01-001',
riskLevel: '高', deviceName: '消防水泵',
warningTime: '2024-01-15 11:20:45', modelSpec: 'XBD5.0/30-125',
mainReason: '检测到气体泄漏', installLocation: '总部大楼地下一层',
status: '未处理', status: '故障',
lastMaintenance: '2025-09-10',
}, },
{ {
key: '5', key: '5',
id: '005', id: '005',
deviceId: 'DEV-005', deviceId: 'HQ-XF-01-001',
riskLevel: '低', deviceName: '消防水泵',
warningTime: '2024-01-15 12:10:20', modelSpec: 'XBD5.0/30-125',
mainReason: '设备振动异常', installLocation: '总部大楼地下一层',
status: '已处理', status: '正常',
lastMaintenance: '2025-09-10',
}, },
{ {
key: '6', key: '6',
id: '006', id: '006',
deviceId: 'DEV-006', deviceId: 'HQ-XF-01-001',
riskLevel: '中', deviceName: '消防水泵',
warningTime: '2024-01-15 13:25:15', modelSpec: 'XBD5.0/30-125',
mainReason: '流量传感器读数异常', installLocation: '总部大楼地下一层',
status: '未处理', status: '预警',
lastMaintenance: '2025-09-10',
}, },
{ {
key: '7', key: '7',
id: '007', id: '007',
deviceId: 'DEV-007', deviceId: 'HQ-XF-01-001',
riskLevel: '高', deviceName: '消防水泵',
warningTime: '2024-01-15 14:10:30', modelSpec: 'XBD5.0/30-125',
mainReason: '储罐压力超限', installLocation: '总部大楼地下一层',
status: '处理中', status: '故障',
lastMaintenance: '2025-09-10',
}, },
{ {
key: '8', key: '8',
id: '008', id: '008',
deviceId: 'DEV-008', deviceId: 'HQ-XF-01-001',
riskLevel: '中', deviceName: '消防水泵',
warningTime: '2024-01-15 15:45:20', modelSpec: 'XBD5.0/30-125',
mainReason: '管道温度异常', installLocation: '总部大楼地下一层',
status: '已处理', status: '正常',
lastMaintenance: '2025-09-10',
}, },
{ {
key: '9', key: '9',
id: '009', id: '009',
deviceId: 'DEV-009', deviceId: 'HQ-XF-01-001',
riskLevel: '高', deviceName: '消防水泵',
warningTime: '2024-01-15 16:30:45', modelSpec: 'XBD5.0/30-125',
mainReason: '阀门控制系统故障', installLocation: '总部大楼地下一层',
status: '未处理', status: '预警',
lastMaintenance: '2025-09-10',
}, },
{ {
key: '10', key: '10',
id: '010', id: '010',
deviceId: 'DEV-010', deviceId: 'HQ-XF-01-001',
riskLevel: '低', deviceName: '消防水泵',
warningTime: '2024-01-15 17:15:10', modelSpec: 'XBD5.0/30-125',
mainReason: '轻微泄漏检测', installLocation: '总部大楼地下一层',
status: '已处理', status: '故障',
lastMaintenance: '2025-09-10',
}, },
{ {
key: '11', key: '11',
id: '011', id: '011',
deviceId: 'DEV-011', deviceId: 'HQ-XF-01-001',
riskLevel: '高', deviceName: '消防水泵',
warningTime: '2024-01-15 18:20:35', modelSpec: 'XBD5.0/30-125',
mainReason: '安全阀异常开启', installLocation: '总部大楼地下一层',
status: '处理中', status: '正常',
lastMaintenance: '2025-09-10',
}, },
{ {
key: '12', key: '12',
id: '012', id: '012',
deviceId: 'DEV-012', deviceId: 'HQ-XF-01-001',
riskLevel: '中', deviceName: '消防水泵',
warningTime: '2024-01-15 19:05:50', modelSpec: 'XBD5.0/30-125',
mainReason: '液位计读数不稳定', installLocation: '总部大楼地下一层',
status: '未处理', status: '预警',
lastMaintenance: '2025-09-10',
}, },
]; ];
@ -590,6 +613,18 @@ const RiskAssessment = () => {
setSelectedRows(newSelectedRows); setSelectedRows(newSelectedRows);
}; };
// 新增设备按钮点击事件
const handleAddDevice = () => {
console.log('新增设备');
// TODO: 实现新增设备逻辑
};
// 导出数据按钮点击事件
const handleExportData = () => {
console.log('导出数据');
// TODO: 实现导出数据逻辑
};
// 分页变化处理 // 分页变化处理
const handleTableChange = (pagination) => { const handleTableChange = (pagination) => {
setPagination(prev => ({ setPagination(prev => ({
@ -599,7 +634,7 @@ const RiskAssessment = () => {
})); }));
}; };
return ( return (
<div className={styles.Rcontainer}> <div className={styles.Rcontainer}>
{/* 第一个div - 高度20% */} {/* 第一个div - 高度20% */}
<div className={styles.RcontainerTop}> <div className={styles.RcontainerTop}>
@ -653,7 +688,7 @@ const RiskAssessment = () => {
</div> </div>
</div> </div>
<div className={styles.RcontainerMiddle}> <div className={styles.RcontainerMiddle}>
<div className={styles.sectionContent}> <div className={styles.sectionContent}>
<div className={styles.middleBlock1}> <div className={styles.middleBlock1}>
@ -678,7 +713,7 @@ const RiskAssessment = () => {
<img src={map1} alt="地图" className={styles.mapImage} /> <img src={map1} alt="地图" className={styles.mapImage} />
</div> */} </div> */}
</div> </div>
<div className={styles.middleBlock12}> <div className={styles.middleBlock12}>
<div className={styles.block1Header}> <div className={styles.block1Header}>
<div className={styles.block1Title}> <div className={styles.block1Title}>
@ -687,7 +722,7 @@ const RiskAssessment = () => {
</div> </div>
<Select <Select
className={styles.customSelect} className={styles.customSelect}
style={{ width: 120 }} style={{ width: 120 }}
defaultValue="全部区域" defaultValue="全部区域"
// defaultValue="全部区域" // defaultValue="全部区域"
options={[ options={[
@ -700,9 +735,9 @@ const RiskAssessment = () => {
{/* 设备故障类型饼图 */} {/* 设备故障类型饼图 */}
<div className={styles.deviceStatusChart} ref={faultPieChartRef}> <div className={styles.deviceStatusChart} ref={faultPieChartRef}>
</div> </div>
</div> </div>
<div className={styles.middleBlock2}> <div className={styles.middleBlock2}>
<div className={styles.middleBlock2Title}> <div className={styles.middleBlock2Title}>
<div className={styles.titleLeft}> <div className={styles.titleLeft}>
@ -710,7 +745,7 @@ const RiskAssessment = () => {
<div>设备运行参数</div> <div>设备运行参数</div>
</div> </div>
<div className={styles.titleRight}> <div className={styles.titleRight}>
<Select <Select
style={{ width: 80 }} style={{ width: 80 }}
defaultValue="今日" defaultValue="今日"
@ -728,76 +763,103 @@ const RiskAssessment = () => {
</div> </div>
</div> </div>
{/* 第三个div - 占满剩余位置 */} {/* 第三个div - 占满剩余位置 */}
<div className={styles.RcontainerBottom}> <div className={styles.RcontainerBottom}>
<div className={styles.sectionContent}> <div className={styles.sectionContent}>
<div className={styles.leftBlock}> <div className={styles.leftBlock}>
{/* 第一行块 - 蓝色方块加标题 */} {/* 第一行块 - 蓝色方块加标题 */}
<div className={styles.leftBlockTitle}> <div className={styles.leftBlockTitle}>
<div className={styles.titleIcon}></div> <div className={styles.titleIcon}></div>
<div>风险评估参数</div> <div>预警信息</div>
</div> </div>
{/* 第二行块 - 图片 */} <div className={styles.developmentContainer}>
<div className={styles.leftBlockImage}> <div className={styles.developmentBlock1}>
{/* <img src={risk2} alt="风险评估图" style={{ width: '40%', height: '40%', objectFit: 'cover' }} /> */} <div className={styles.leftContent}>
</div> <div className={styles.mainText}>灭火器压力不足</div>
<div className={styles.subText}>2号楼3层 丨 15分钟前</div>
{/* 第三行块 */} </div>
<div className={styles.leftBlockItem}> <div className={styles.rightContent}>
<div className={styles.itemTitle}>风险等级</div> <div className={styles.importantTag}>重要</div>
<div className={styles.itemValue}>高风险</div> </div>
</div> </div>
<div className={styles.developmentBlock1}>
{/* 第四行块 */} <div className={styles.leftContent}>
<div className={styles.leftBlockItem}> <div className={styles.mainText}>烟雾探测器电池低电量</div>
<div className={styles.itemTitle}>评估时间</div> <div className={styles.subText}>1号楼5层 丨 1小时前</div>
<div className={styles.itemValue}>2024-01-15</div> </div>
</div> <div className={styles.rightContent}>
<div className={styles.importantTag}>重要</div>
{/* 第五行块 */} </div>
<div className={styles.leftBlockItem}> </div>
<div className={styles.itemTitle}>评估人员</div> <div className={styles.developmentBlock1}>
<div className={styles.itemValue}>张三</div> <div className={styles.leftContent}>
</div> <div className={styles.mainText}>消防栓维护到期</div>
</div> <div className={styles.subText}>3号楼1层 丨 2小时前</div>
</div>
<div className={styles.rightBlock}> <div className={styles.rightContent}>
{/* 表格 */} <div className={styles.normalTag}>一般</div>
<div className={styles.tableHeader}> </div>
<div className={styles.tableTitle}> </div>
<div className={styles.titleIcon}></div> <div className={styles.developmentBlock1}>
<div>最新预警信息</div> <div className={styles.leftContent}>
</div> <div className={styles.mainText}>应急照明故障</div>
</div> <div className={styles.subText}>地下停车场 丨 3小时前</div>
</div>
{/* 表格 */} <div className={styles.rightContent}>
<div className={styles.tableContainer}> <div className={styles.normalTag}>一般</div>
<StandardTable </div>
columns={columns} </div>
data={{ </div>
list: getCurrentPageData(), </div>
pagination: pagination
}} <div className={styles.rightBlock}>
loading={loading} {/* 表格 */}
selectionType="checkbox" <div className={styles.tableHeader}>
onSelectRow={onSelectChange} <div className={styles.tableTitle}>
onChange={handleTableChange} <div className={styles.titleIcon}></div>
pagination={{ <div>消防设备台账</div>
...pagination, </div>
showSizeChanger: false,
showQuickJumper: true, <div className={styles.tableActions}>
showTotal: (total, range) => <button className={styles.actionButton} onClick={handleAddDevice}>
`共 ${total} 条`, <span className={styles.buttonIcon}>+</span>
}} <span>新增设备</span>
scroll={{ x: 1200 }} </button>
/> <button className={styles.actionButton} onClick={handleExportData}>
</div> <span className={styles.buttonIcon}><ExportOutlined /></span>
</div> <span>导出数据</span>
</div> </button>
</div> </div>
</div>
{/* 表格 */}
<div className={styles.tableContainer}>
<StandardTable
columns={columns}
data={{
list: getCurrentPageData(),
pagination: pagination
}}
loading={loading}
selectionType="checkbox"
onSelectRow={onSelectChange}
onChange={handleTableChange}
pagination={{
...pagination,
showSizeChanger: false,
showQuickJumper: true,
showTotal: (total, range) =>
`共 ${total} 条`,
}}
// scroll={{ x: 1200 }}
/>
</div>
</div>
</div> </div>
); </div>
}; </div>
);
};
export default RiskAssessment; export default RiskAssessment;

164
src/pages/business_basic/module/RiskAssessment.less
Unescape Escape View File

@ -103,9 +103,9 @@
} }
} }
// 第二个div - 高度30% // 第二个div - 高度39%
.RcontainerMiddle { .RcontainerMiddle {
height: 35%; height: 33%;
border-radius: 4px; border-radius: 4px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -123,10 +123,10 @@
// flex: 1; // flex: 1;
width: 28%; width: 28%;
height: 100%; height: 100%;
background: linear-gradient(170.5deg, #EBEFF4 6.87%, #FFFFFF 53.01%); background: #fff;
border: 2px solid #fff; border: 2px solid #fff;
border-radius: 4px; // border-radius: 4px;
position: relative; position: relative;
padding: 0px 10px 10px 2px; padding: 0px 10px 10px 2px;
font-family: PingFang SC; font-family: PingFang SC;
@ -361,9 +361,10 @@
} }
} }
// 第三个div - 占满剩余位置 // 第三个div - 高度不超过45%
.RcontainerBottom { .RcontainerBottom {
flex: 1; // 占满剩余空间 height: 45%; // 限制高度不超过45%
max-height: 45%; // 确保最大高度不超过45%
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -374,10 +375,11 @@
padding: 0; padding: 0;
.leftBlock { .leftBlock {
width: 30%; width: 28%;
flex-shrink: 0;
height: 100%; height: 100%;
background: url('@/assets/safe_majorHazard/online_monitoring/risk3.png') no-repeat center center; background: #fff;
background-size: cover; // background-size: cover;
padding: 0; padding: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -392,6 +394,7 @@
font-weight: 500; font-weight: 500;
font-size: 14px; font-size: 14px;
color: #333333; color: #333333;
margin-bottom: 10px;
.titleIcon { .titleIcon {
width: 3px; width: 3px;
@ -400,43 +403,91 @@
} }
} }
.leftBlockImage { .developmentContainer {
height: 40%;
width: 100%; width: 100%;
border-radius: 4px; height: 100%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
height: 80%;
}
.leftBlockItem {
flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; gap: 8px;
padding: 10px;
// background-color: #f5f5f5;
border-radius: 4px;
font-family: PingFang SC;
.itemTitle {
font-size: 12px;
color: #666666;
margin-bottom: 5px;
}
.itemValue { .developmentBlock1 {
font-size: 14px; flex: 1;
color: #333333; background-color: #F1F7FF;
font-weight: 500; 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 { .rightBlock {
width: 68%; width: calc(100% - 28% - 10px);
height: 100%; height: 100%;
background-color: #fff; background-color: #fff;
padding: 0; padding: 0;
@ -464,11 +515,48 @@
background-color: #2E4CD4; 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 { .tableContainer {
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
margin: 10px 15px 0 15px; // 上边距10px，左右边距15px
:global(.ant-table) { :global(.ant-table) {
font-size: 12px; font-size: 12px;

Write Preview
Loading…
Cancel
Save