From f311f3876143be0212b84c36266bd09a63bc3107 Mon Sep 17 00:00:00 2001 From: wangyunfei <1224056307@qq,com> Date: Mon, 13 Oct 2025 14:14:42 +0800 Subject: [PATCH] =?UTF-8?q?=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../business_envinformation/deleteicon.svg | 4 + .../business_envinformation/editicon.svg | 4 + .../business_envinformation/viewicon.svg | 3 + .../EnvironmentalPersonnelManagement.js | 1047 +++++++++++++---- .../EnvironmentalPersonnelManagement.less | 476 +++++--- .../secondary_menu/PermitManagement.less | 17 +- 6 files changed, 1138 insertions(+), 413 deletions(-) create mode 100644 src/assets/business_envinformation/deleteicon.svg create mode 100644 src/assets/business_envinformation/editicon.svg create mode 100644 src/assets/business_envinformation/viewicon.svg diff --git a/src/assets/business_envinformation/deleteicon.svg b/src/assets/business_envinformation/deleteicon.svg new file mode 100644 index 0000000..6fb94fb --- /dev/null +++ b/src/assets/business_envinformation/deleteicon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/business_envinformation/editicon.svg b/src/assets/business_envinformation/editicon.svg new file mode 100644 index 0000000..3e1c480 --- /dev/null +++ b/src/assets/business_envinformation/editicon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/business_envinformation/viewicon.svg b/src/assets/business_envinformation/viewicon.svg new file mode 100644 index 0000000..a6dd804 --- /dev/null +++ b/src/assets/business_envinformation/viewicon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/pages/business_envInformation/module/EnvironmentalPersonnelManagement.js b/src/pages/business_envInformation/module/EnvironmentalPersonnelManagement.js index 4cff4d7..fc04597 100644 --- a/src/pages/business_envInformation/module/EnvironmentalPersonnelManagement.js +++ b/src/pages/business_envInformation/module/EnvironmentalPersonnelManagement.js @@ -1,7 +1,8 @@ import React, { useState, useEffect } from 'react'; -import { Card, Result, Select, Button } from 'antd'; -import { CheckCircleOutlined, ExportOutlined } from '@ant-design/icons'; +import moment from 'moment'; +import { Card, Result, Select, Button, Drawer, Upload, Input, Modal, Form, DatePicker, Row, Col } from 'antd'; +import { CheckCircleOutlined, ExportOutlined, PlusOutlined, UploadOutlined } from '@ant-design/icons'; import StandardTable from '@/components/StandardTable'; import styles from './EnvironmentalPersonnelManagement.less'; // import './EnvironmentalPersonnelManagement.less'; @@ -17,6 +18,13 @@ 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 viewIcon from '@/assets/business_envinformation/viewicon.svg'; +import editIcon from '@/assets/business_envinformation/editicon.svg'; +import deleteIcon from '@/assets/business_envinformation/deleteicon.svg'; + + + + const EnvironmentalPersonnelManagement = () => { const [selectedRowKeys, setSelectedRowKeys] = useState([]); @@ -25,9 +33,15 @@ const EnvironmentalPersonnelManagement = () => { const [dataSource, setDataSource] = useState([]); const [pagination, setPagination] = useState({ current: 1, - pageSize: 5, + pageSize: 10, total: 0, }); + const [drawerVisible, setDrawerVisible] = useState(false); + const [selectedRecord, setSelectedRecord] = useState(null); + const [modalVisible, setModalVisible] = useState(false); + const [form] = Form.useForm(); + const [editDrawerVisible, setEditDrawerVisible] = useState(false); + const [editForm] = Form.useForm(); @@ -35,97 +49,93 @@ const EnvironmentalPersonnelManagement = () => { // 表格列定义 const columns = [ { - title: '编号', + title: '序号', dataIndex: 'id', key: 'id', - width: 60, + width: 80, render: (text, record, index) => { const page = pagination.current || 1; - const pageSize = pagination.pageSize || 5; + const pageSize = pagination.pageSize || 10; const number = (page - 1) * pageSize + index + 1; - return `0${number}`.slice(-2); + return number; } }, { - title: '设备编号', - dataIndex: 'deviceId', - key: 'deviceId', - width: 140, + title: '姓名', + dataIndex: 'name', + key: 'name', + width: 120, }, { - title: '设备名称', - dataIndex: 'deviceName', - key: 'deviceName', - width: 110, + title: '部门', + dataIndex: 'department', + key: 'department', + width: 120, + filters: [ + { text: '环保管理', value: '环保管理' }, + { text: '技术部', value: '技术部' }, + { text: '生产部', value: '生产部' }, + { text: '质量部', value: '质量部' }, + ], + onFilter: (value, record) => record.department === value, }, { - title: '型号规格', - dataIndex: 'modelSpec', - key: 'modelSpec', - width: 140, + title: '岗位', + dataIndex: 'position', + key: 'position', + width: 120, + filters: [ + { text: '污水化验', value: '污水化验' }, + { text: '环境监测', value: '环境监测' }, + { text: '环保工程师', value: '环保工程师' }, + { text: '安全员', value: '安全员' }, + { text: '技术员', value: '技术员' }, + ], + onFilter: (value, record) => record.position === value, }, { - title: '安装位置', - dataIndex: 'installLocation', - key: 'installLocation', - width: 200, + title: '入职时间', + dataIndex: 'joinDate', + key: 'joinDate', + width: 120, + sorter: (a, b) => { + // 将日期字符串转换为Date对象进行比较 + const dateA = new Date(a.joinDate); + const dateB = new Date(b.joinDate); + return dateA - dateB; + }, }, { - 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: 'responsibility', + key: 'responsibility', + width: 200, }, { - title: '最后维护', - dataIndex: 'lastMaintenance', - key: 'lastMaintenance', + title: '联系方式', + dataIndex: 'contact', + key: 'contact', width: 150, }, { title: '操作', key: 'action', - width: 140, + width: 180, render: (_, record) => ( -
- - +
+ 查看 handleView(record)} + /> + 编辑 handleEdit(record)} + /> + 删除
), }, @@ -136,122 +146,168 @@ const EnvironmentalPersonnelManagement = () => { { key: '1', id: '001', - deviceId: 'HQ-XF-01-001', - deviceName: '消防水泵', - modelSpec: 'XBD5.0/30-125', - installLocation: '总部大楼1层大厅', - status: '故障', - lastMaintenance: '2025-09-10', + name: '吴振峰', + department: '环保管理', + position: '污水运行', + joinDate: '2025-09-02', + responsibility: '保障污水设备运行、处理故障', + contact: '13321493732', + employeeId: '434545', + gender: '男', + birthDate: '2025-08-08', + idCard: '340802199809050811', + address: '西辛南区46号楼2单元101室', + other: '暂无' }, { key: '2', id: '002', - deviceId: 'HQ-XF-01-001', - deviceName: '消防水泵', - modelSpec: 'XBD5.0/30-125', - installLocation: '总部大楼3层 东区', - status: '预警', - lastMaintenance: '2025-09-10', + name: '张一龙', + department: '环保管理', + position: '污水化验', + joinDate: '2025-08-25', + responsibility: '定期采样分析', + contact: '13800138002', }, { key: '3', id: '003', - deviceId: 'HQ-XF-01-001', - deviceName: '消防水泵', - modelSpec: 'XBD5.0/30-125', - installLocation: '总部大楼地下一层', - status: '正常', - lastMaintenance: '2025-09-10', + name: '张一龙', + department: '环保管理', + position: '污水化验', + joinDate: '2025-08-25', + responsibility: '定期采样分析', + contact: '13800138003', }, { key: '4', id: '004', - deviceId: 'HQ-XF-01-001', - deviceName: '消防水泵', - modelSpec: 'XBD5.0/30-125', - installLocation: '总部大楼地下一层', - status: '故障', - lastMaintenance: '2025-09-10', + name: '张一龙', + department: '环保管理', + position: '污水化验', + joinDate: '2025-08-25', + responsibility: '定期采样分析', + contact: '13800138004', }, { key: '5', id: '005', - deviceId: 'HQ-XF-01-001', - deviceName: '消防水泵', - modelSpec: 'XBD5.0/30-125', - installLocation: '总部大楼地下一层', - status: '正常', - lastMaintenance: '2025-09-10', + name: '张一龙', + department: '环保管理', + position: '污水化验', + joinDate: '2025-08-25', + responsibility: '定期采样分析', + contact: '13800138005', }, { key: '6', id: '006', - deviceId: 'HQ-XF-01-001', - deviceName: '消防水泵', - modelSpec: 'XBD5.0/30-125', - installLocation: '总部大楼地下一层', - status: '预警', - lastMaintenance: '2025-09-10', + name: '张一龙', + department: '环保管理', + position: '污水化验', + joinDate: '2025-08-25', + responsibility: '定期采样分析', + contact: '13800138006', }, { key: '7', id: '007', - deviceId: 'HQ-XF-01-001', - deviceName: '消防水泵', - modelSpec: 'XBD5.0/30-125', - installLocation: '总部大楼地下一层', - status: '故障', - lastMaintenance: '2025-09-10', + name: '张一龙', + department: '环保管理', + position: '污水化验', + joinDate: '2025-08-25', + responsibility: '定期采样分析', + contact: '13800138007', }, { key: '8', id: '008', - deviceId: 'HQ-XF-01-001', - deviceName: '消防水泵', - modelSpec: 'XBD5.0/30-125', - installLocation: '总部大楼地下一层', - status: '正常', - lastMaintenance: '2025-09-10', + name: '张一龙', + department: '环保管理', + position: '污水化验', + joinDate: '2025-08-25', + responsibility: '定期采样分析', + contact: '13800138008', }, { key: '9', id: '009', - deviceId: 'HQ-XF-01-001', - deviceName: '消防水泵', - modelSpec: 'XBD5.0/30-125', - installLocation: '总部大楼地下一层', - status: '预警', - lastMaintenance: '2025-09-10', + name: '张一龙', + department: '环保管理', + position: '污水化验', + joinDate: '2025-08-25', + responsibility: '定期采样分析', + contact: '13800138009', }, { key: '10', id: '010', - deviceId: 'HQ-XF-01-001', - deviceName: '消防水泵', - modelSpec: 'XBD5.0/30-125', - installLocation: '总部大楼地下一层', - status: '故障', - lastMaintenance: '2025-09-10', + name: '张一龙', + department: '环保管理', + position: '污水化验', + joinDate: '2025-08-25', + responsibility: '定期采样分析', + contact: '13800138010', }, { key: '11', id: '011', - deviceId: 'HQ-XF-01-001', - deviceName: '消防水泵', - modelSpec: 'XBD5.0/30-125', - installLocation: '总部大楼地下一层', - status: '正常', - lastMaintenance: '2025-09-10', + name: '张一龙', + department: '环保管理', + position: '污水化验', + joinDate: '2025-08-25', + responsibility: '定期采样分析', + contact: '13800138011', }, { key: '12', id: '012', - deviceId: 'HQ-XF-01-001', - deviceName: '消防水泵', - modelSpec: 'XBD5.0/30-125', - installLocation: '总部大楼地下一层', - status: '预警', - lastMaintenance: '2025-09-10', + name: '张一龙', + department: '环保管理', + position: '污水化验', + joinDate: '2025-08-25', + responsibility: '定期采样分析', + contact: '13800138012', + }, + { + key: '13', + id: '013', + name: '张一龙', + department: '环保管理', + position: '污水化验', + joinDate: '2025-08-25', + responsibility: '定期采样分析', + contact: '13800138013', + }, + { + key: '14', + id: '014', + name: '张一龙', + department: '环保管理', + position: '污水化验', + joinDate: '2025-08-25', + responsibility: '定期采样分析', + contact: '13800138014', + }, + { + key: '15', + id: '015', + name: '张一龙', + department: '环保管理', + position: '污水化验', + joinDate: '2025-08-25', + responsibility: '定期采样分析', + contact: '13800138015', + }, + { + key: '16', + id: '016', + name: '张一龙', + department: '环保管理', + position: '污水化验', + joinDate: '2025-08-25', + responsibility: '定期采样分析', + contact: '13800138016', }, ]; @@ -295,6 +351,81 @@ const EnvironmentalPersonnelManagement = () => { })); }; + // 查看详情 + const handleView = (record) => { + setSelectedRecord(record); + setDrawerVisible(true); + }; + + // 关闭抽屉 + const handleCloseDrawer = () => { + setDrawerVisible(false); + setSelectedRecord(null); + }; + + // 打开新增模态框 + const handleOpenModal = () => { + setModalVisible(true); + }; + + // 关闭新增模态框 + const handleCloseModal = () => { + setModalVisible(false); + form.resetFields(); + }; + + // 保存新增数据 + const handleSave = () => { + form.validateFields().then(values => { + console.log('新增数据:', values); + // TODO: 实现保存逻辑 + setModalVisible(false); + form.resetFields(); + }).catch(error => { + console.log('表单验证失败:', error); + }); + }; + + // 打开编辑抽屉 + const handleEdit = (record) => { + setSelectedRecord(record); + setEditDrawerVisible(true); + // 设置表单初始值 + editForm.setFieldsValue({ + name: record.name, + employeeId: record.employeeId, + department: record.department, + position: record.position, + gender: record.gender, + address: record.address, + birthDate: record.birthDate ? moment(record.birthDate) : null, + joinDate: record.joinDate ? moment(record.joinDate) : null, + idCard: record.idCard, + contact: record.contact, + responsibility: record.responsibility, + other: record.other + }); + }; + + // 关闭编辑抽屉 + const handleCloseEditDrawer = () => { + setEditDrawerVisible(false); + setSelectedRecord(null); + editForm.resetFields(); + }; + + // 保存编辑数据 + const handleEditSave = () => { + editForm.validateFields().then(values => { + console.log('编辑数据:', values); + // TODO: 实现保存逻辑 + setEditDrawerVisible(false); + editForm.resetFields(); + }).catch(error => { + console.log('表单验证失败:', error); + }); + }; + return (
{/* 第一个div - 高度20% */} @@ -305,7 +436,7 @@ const EnvironmentalPersonnelManagement = () => {
环保总人数
-
258
+
258
截止到 2025-09-11 07:35
@@ -314,7 +445,7 @@ const EnvironmentalPersonnelManagement = () => {
环保总人数
-
258
+
58
截止到 2025-09-11 07:35
@@ -323,7 +454,8 @@ const EnvironmentalPersonnelManagement = () => {
需要维护
-
347
+
51
+
截止到 2025-09-11 07:35
@@ -331,7 +463,7 @@ const EnvironmentalPersonnelManagement = () => {
环保总人数
-
258
+
28
截止到 2025-09-11 07:35
@@ -340,7 +472,7 @@ const EnvironmentalPersonnelManagement = () => {
环保总人数
-
258
+
50
截止到 2025-09-11 07:35
@@ -349,7 +481,7 @@ const EnvironmentalPersonnelManagement = () => {
环保总人数
-
258
+
58
截止到 2025-09-11 07:35
@@ -363,98 +495,561 @@ const EnvironmentalPersonnelManagement = () => { {/* 第三个div - 占满剩余位置 */}
-
- {/* 第一行块 - 蓝色方块加标题 */} -
-
-
预警信息
+ {/* 第一行 - 表单控件 */} +
+ + +
+ 筛选条件 + + +
+
-
-
-
-
灭火器压力不足
-
2号楼3层 丨 15分钟前
-
-
-
重要
+ {/* 第二行 - 表格 */} +
+ + `共 ${total} 条`, + }} + /> +
+
+
+ + {/* 侧边抽屉 */} + + {selectedRecord && ( +
+ {/* 姓名和头像区域 */} +
+
+

+ {selectedRecord.name} +

+ + {/* 基本信息 - 两列布局 */} +
+
+
+ 工号: + {selectedRecord.employeeId} +
+
+ 部门: + {selectedRecord.department} +
+
+ 岗位: + {selectedRecord.position} +
+
+ 性别: + {selectedRecord.gender} +
+
+ 住址: + {selectedRecord.address} +
+
+ +
+
+ 出生日期: + {selectedRecord.birthDate} +
+
+ 入职时间: + {selectedRecord.joinDate} +
+
+ 身份证号: + {selectedRecord.idCard} +
+
+ 联系方式: + {selectedRecord.contact} +
+
-
-
-
烟雾探测器电池低电量
-
1号楼5层 丨 1小时前
-
-
-
重要
-
+ + {/* 头像上传区域 */} +
+
👤
+
上传
-
-
-
消防栓维护到期
-
3号楼1层 丨 2小时前
-
-
-
一般
-
+
+ + {/* 岗位职责 */} +
+
+ 岗位职责
-
-
-
应急照明故障3
-
地下停车场 丨 3小时前
-
-
-
一般
-
+ +
+ + {/* 其他 */} +
+
+ 其他
+
+ )} + -
- {/* 表格 */} -
-
-
-
消防设备台账
-
+ {/* 新增模态框 */} + + 取消 + , + + ]} + closable={true} + > +
+ + {/* 左侧列 */} + + 姓名} + name="name" + rules={[{ required: true, message: '请输入姓名' }]} + > + + -
- - -
-
+ 工号} + name="employeeId" + rules={[{ required: true, message: '请输入工号' }]} + > + + - {/* 表格 */} -
- - `共 ${total} 条`, - }} - // scroll={{ x: 1200 }} - /> + 部门} + name="department" + rules={[{ required: true, message: '请选择部门' }]} + > + + + + 岗位} + name="position" + rules={[{ required: true, message: '请选择岗位' }]} + > + + + + 性别} + name="gender" + rules={[{ required: true, message: '请选择性别' }]} + > + + + + 住址} + name="address" + rules={[{ required: true, message: '请输入住址' }]} + > + + + + + {/* 右侧列 */} + + 出生日期} + name="birthDate" + rules={[{ required: true, message: '请选择出生日期' }]} + > + + + + 入职时间} + name="joinDate" + rules={[{ required: true, message: '请选择入职时间' }]} + > + + + + 身份证号} + name="idCard" + rules={[{ required: true, message: '请输入身份证号' }]} + > + + + + 联系方式} + name="contact" + rules={[{ required: true, message: '请输入联系方式' }]} + > + + + + {/* 照片上传 */} + 照片} + name="photo" + > + false} + > +
+ +
上传
+
+
+
+ + + + {/* 岗位职责 */} + 岗位职责} + name="responsibility" + rules={[{ required: true, message: '请输入岗位职责' }]} + > + + + + {/* 其他 */} + 其他} + name="other" + > + + + + + + {/* 编辑抽屉 */} + + 取消 + , + + ]} + > +
+ {/* 姓名和头像区域 */} +
+
+ + + + + {/* 基本信息 - 两列布局 */} + + + 工号} + name="employeeId" + rules={[{ required: true, message: '请输入工号' }]} + > + + + + 部门} + name="department" + rules={[{ required: true, message: '请选择部门' }]} + > + + + + 岗位} + name="position" + rules={[{ required: true, message: '请选择岗位' }]} + > + + + + 性别} + name="gender" + rules={[{ required: true, message: '请选择性别' }]} + > + + + + 住址} + name="address" + rules={[{ required: true, message: '请输入住址' }]} + > + + + + + + 出生日期} + name="birthDate" + rules={[{ required: true, message: '请选择出生日期' }]} + > + + + + 入职时间} + name="joinDate" + rules={[{ required: true, message: '请选择入职时间' }]} + > + + + + 身份证号} + name="idCard" + rules={[{ required: true, message: '请输入身份证号' }]} + > + + + + 联系方式} + name="contact" + rules={[{ required: true, message: '请输入联系方式' }]} + > + + + + +
+ + {/* 头像上传区域 */} +
+
👤
+
上传
-
-
+ + {/* 岗位职责 */} + 岗位职责} + name="responsibility" + rules={[{ required: true, message: '请输入岗位职责' }]} + > + + + + {/* 其他 */} + 其他} + name="other" + > + + + +
); }; diff --git a/src/pages/business_envInformation/module/EnvironmentalPersonnelManagement.less b/src/pages/business_envInformation/module/EnvironmentalPersonnelManagement.less index 0cc1252..e62352d 100644 --- a/src/pages/business_envInformation/module/EnvironmentalPersonnelManagement.less +++ b/src/pages/business_envInformation/module/EnvironmentalPersonnelManagement.less @@ -37,7 +37,10 @@ &.block1 { background: url('@/assets/business_envinformation/background1.svg'), - linear-gradient(180deg, #DBEBFF 0%, #DBEBFF 12.5%, rgba(255, 255, 255, 0.700824) 56%, rgba(255, 255, 255, 0.01) 100%); + + linear-gradient(180deg, #DBEBFF 0%, #DBEBFF 12.5%, rgba(255, 255, 255, 0.700824) 56%, rgba(255, 255, 255, 0.01) 100%), + linear-gradient(0deg, #FFFFFF, #FFFFFF); + // linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)); background-size: 100% 100%; background-repeat: no-repeat; background-position: center; @@ -117,6 +120,31 @@ font-size: 24px; color: #333333; line-height: 1.2; + + // 特定数字颜色 + &.number258 { + color: #0080FF; + } + + &.number58 { + color: #EFB700; + } + + &.number51 { + color: #00DA86; + } + + &.number28 { + color: #00DA86; + } + + &.number50 { + color: #FD0404; + } + + &.number58Second { + color: #A318E4; + } } .blockTime { @@ -177,228 +205,310 @@ flex: 1; // 占满剩余空间 display: flex; flex-direction: column; + background-color: #fff; + padding: 15px; .sectionContent { + height: 100%; display: flex; - flex-direction: row; - gap: 10px; - padding: 0; + flex-direction: column; + gap: 15px; - .leftBlock { - width: 28%; - flex-shrink: 0; - height: 100%; - background: #fff; - // background-size: cover; - padding: 0; + // 第一行 - 表单控件 + .formRow { display: flex; - flex-direction: column; - gap: 10px; - padding: 15px; + align-items: center; + gap: 15px; + flex-shrink: 0; - .leftBlockTitle { + .addButton { 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; + gap: 4px; + height: 28px; + border: 1px solid #00D48A; + border-radius: 2px; + color: #fff; + font-weight: 400; + font-size: 12px; + padding: 0 10px; + background: #00D48A; + cursor: pointer; + transition: all 0.2s ease; + + &:hover { + background-color: #00B875; + border-color: #00B875; } - } - .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; - } - } - } + .buttonIcon { + font-size: 16px; + font-weight: bold; + } } - } - - .rightBlock { - width: calc(100% - 28% - 10px); - height: 100%; - background-color: #fff; - padding: 0; - display: flex; - flex-direction: column; - .tableHeader { + .rightControls { display: flex; - justify-content: space-between; align-items: center; - padding: 8px 15px 5px 15px; + gap: 15px; + margin-left: auto; - .tableTitle { - display: flex; - align-items: center; - gap: 8px; - font-family: PingFang SC; - font-weight: 500; - font-size: 14px; + .filterLabel { + font-size: 13px; color: #333333; + white-space: nowrap; + } - .titleIcon { - width: 3px; - height: 16px; - background-color: #2E4CD4; + // Select组件样式 + :global(.ant-select) { + font-size: 12px; + height: 28px !important; + } + + :global(.ant-select .ant-select-selector) { + height: 28px !important; + font-size: 12px; + border-radius: 2px !important; + display: flex !important; + align-items: center !important; + padding: 0 11px !important; + } + + :global(.ant-select .ant-select-selection-item) { + line-height: 1.5714285714285714; + font-size: 12px; + } + + :global(.ant-select .ant-select-selection-placeholder) { + line-height: 1.5714285714285714; + font-size: 12px; + color: #00000040 !important; + } + + .searchInput { + width: 150px; + height: 28px; + border: 1px solid #d9d9d9; + border-radius: 2px; + padding: 0 12px; + font-size: 12px; + + &:focus { + border-color: #2E4CD4; + outline: none; + } + + &::placeholder { + color: #00000040; } } - .tableActions { - display: flex; - gap: 8px; - margin-top: 5px; + .queryButton, .resetButton { + height: 28px; + border: 1px solid #d9d9d9; + border-radius: 4px; + padding: 0 16px; + font-size: 12px; + cursor: pointer; + transition: all 0.2s ease; - .actionButton { - display: flex; - align-items: center; - gap: 4px; - height: 28px; - border: 1px solid #DFE4F6; - border-radius: 4px; + &:hover { + border-color: #2E4CD4; 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; - } + .queryButton { + background-color: #00D48A; + color: #fff; + border-color: #00D48A; - &:active { - background-color: #e6ebff; - } + &:hover { + background-color: #00B875; + border-color: #00B875; + color: #fff; + } + } - .buttonIcon { - font-size: 14px; - font-weight: bold; - } + .resetButton { + background-color: #fff; + color: #666; + + &:hover { + background-color: #f5f5f5; } } } + } - .tableContainer { - flex: 1; - overflow: hidden; - margin: 10px 15px 0 15px; // 上边距10px,左右边距15px + // 第二行 - 表格 + .tableSection { + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; - :global(.ant-table) { - font-size: 12px; - } + :global { + .ant-spin-nested-loading { + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; - :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; + .ant-spin-container { + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; + + .ant-table-wrapper { + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; + + .ant-table { + flex: 1; + overflow: auto; + } + + .ant-table-pagination { + flex-shrink: 0; + margin: 16px 0 0 0; + padding: 0; + } + } + } } - :global(.ant-table-tbody > tr > td) { - padding: 8px 12px; - border-bottom: 1px solid #f0f0f0; - text-align: center; - color: #666666; - } + .ant-table { + font-size: 12px; + + .ant-table-thead > tr > th { + background-color: #fafafa; + font-weight: 400; + color: #000000D9; + border-right: none; + text-align: center; + } + + .ant-table-tbody > tr > td { + border-right: none; + color: #000000D9; + font-weight: 400; + text-align: center; + } - :global(.ant-table-tbody > tr:hover > td) { - background-color: #f5f5f5; + .ant-table-tbody > tr:hover > td { + background-color: #f5f5f5; + } + + a { + color: #1890ff; + text-decoration: none; + + &:hover { + color: #40a9ff; + } + } } - :global(.ant-pagination) { - margin-top: 16px; + .ant-pagination { text-align: right; } } } } } +} + +// 操作按钮图标样式 +.eye-icon { + width: 20px; + height: 12.5px; + position: relative; + display: inline-block; + + &::before { + content: ''; + position: absolute; + width: 20px; + height: 12.5px; + border: 2px solid #86F278; + border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; + top: 0; + left: 0; + transform: rotate(-180deg); + opacity: 1; + } + + &::after { + content: ''; + position: absolute; + width: 6px; + height: 6px; + background-color: #86F278; + border-radius: 50%; + top: 3.5px; + left: 7px; + transform: rotate(-180deg); + } +} + +.edit-icon { + width: 16px; + height: 16px; + position: relative; + display: inline-block; + + &::before { + content: ''; + position: absolute; + width: 12px; + height: 2px; + background-color: #1890ff; + top: 3px; + left: 2px; + transform: rotate(45deg); + } + + &::after { + content: ''; + position: absolute; + width: 2px; + height: 12px; + background-color: #1890ff; + top: 2px; + left: 7px; + transform: rotate(45deg); + } +} + +.delete-icon { + width: 16px; + height: 16px; + position: relative; + display: inline-block; + + &::before { + content: ''; + position: absolute; + width: 12px; + height: 2px; + background-color: #ff4d4f; + top: 7px; + left: 2px; + transform: rotate(45deg); + } + + &::after { + content: ''; + position: absolute; + width: 12px; + height: 2px; + background-color: #ff4d4f; + top: 7px; + left: 2px; + transform: rotate(-45deg); + } } \ No newline at end of file diff --git a/src/pages/business_envInformation/module/secondary_menu/PermitManagement.less b/src/pages/business_envInformation/module/secondary_menu/PermitManagement.less index 40c517d..b200e6c 100644 --- a/src/pages/business_envInformation/module/secondary_menu/PermitManagement.less +++ b/src/pages/business_envInformation/module/secondary_menu/PermitManagement.less @@ -5,6 +5,8 @@ background-color: #fff; display: flex; flex-direction: column; + margin: 0; + padding: 0; .searchSection { // margin-bottom: 20px; @@ -52,36 +54,42 @@ display: flex; flex-direction: column; overflow: hidden; - padding: 0 20px 20px; - + padding: 0 20px 0; + :global { .ant-spin-nested-loading { flex: 1; display: flex; flex-direction: column; overflow: hidden; + margin: 0; + padding: 0; .ant-spin-container { flex: 1; display: flex; flex-direction: column; overflow: hidden; + margin: 0; + padding: 0; .ant-table-wrapper { flex: 1; display: flex; flex-direction: column; overflow: hidden; + margin: 0; + padding: 0; .ant-table { flex: 1; overflow: auto; + margin: 0; } .ant-table-pagination { flex-shrink: 0; - margin: 16px 0 0 0; - padding: 0; + } } } @@ -121,6 +129,7 @@ .ant-pagination { text-align: right; + margin-top: 70px !important; } } }