From 7617b1cd9623016d64347607ba64deaf6d960fa3 Mon Sep 17 00:00:00 2001 From: jiangxucong Date: Mon, 10 Nov 2025 12:51:25 +0800 Subject: [PATCH] =?UTF-8?q?=E5=88=A0=E9=99=A4=E5=A4=9A=E4=BD=99=E8=8F=9C?= =?UTF-8?q?=E5=8D=95=E7=9B=AE=E5=BD=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../FireKeynoteArea.js | 56 -- .../FireKeynoteArea.less | 66 -- .../EmergencyDrillRecordAssociation.js | 749 --------------- .../EmergencyDrillRecordAssociation.less | 482 ---------- .../components/EmergencyPlanAssociation.js | 639 ------------- .../components/EmergencyPlanAssociation.less | 452 --------- .../components/KeypartsBasicInformation.js | 429 --------- .../components/KeypartsBasicInformation.less | 395 -------- src/pages/business_firewarning/FireWarning.js | 48 - .../business_firewarning/FireWarning.less | 66 -- .../components/DataAnalysisWarning.js | 856 ------------------ .../components/DataAnalysisWarning.less | 508 ----------- .../components/RealtimeMonitoring.js | 805 ---------------- .../components/RealtimeMonitoring.less | 782 ---------------- .../business_system/SystemContentList.js | 15 - .../business_system/SystemContentList.less | 10 - .../systemMenu/SystemMenuList.js | 408 --------- .../systemMenu/SystemMenuList.less | 112 --- .../SystemOrganizationList.js | 314 ------- .../SystemOrganizationList.less | 80 -- .../systemRole/SystemRoleList.js | 333 ------- .../systemRole/SystemRoleList.less | 80 -- src/pages/systemMenu/SystemMenuList.js | 402 -------- src/pages/systemMenu/SystemMenuList.less | 115 --- .../SystemOrganizationList.js | 310 ------- .../SystemOrganizationList.less | 80 -- src/pages/systemRole/SystemRoleList.js | 329 ------- src/pages/systemRole/SystemRoleList.less | 80 -- 28 files changed, 9001 deletions(-) delete mode 100644 src/pages/business_firekeynotearea/FireKeynoteArea.js delete mode 100644 src/pages/business_firekeynotearea/FireKeynoteArea.less delete mode 100644 src/pages/business_firekeynotearea/components/EmergencyDrillRecordAssociation.js delete mode 100644 src/pages/business_firekeynotearea/components/EmergencyDrillRecordAssociation.less delete mode 100644 src/pages/business_firekeynotearea/components/EmergencyPlanAssociation.js delete mode 100644 src/pages/business_firekeynotearea/components/EmergencyPlanAssociation.less delete mode 100644 src/pages/business_firekeynotearea/components/KeypartsBasicInformation.js delete mode 100644 src/pages/business_firekeynotearea/components/KeypartsBasicInformation.less delete mode 100644 src/pages/business_firewarning/FireWarning.js delete mode 100644 src/pages/business_firewarning/FireWarning.less delete mode 100644 src/pages/business_firewarning/components/DataAnalysisWarning.js delete mode 100644 src/pages/business_firewarning/components/DataAnalysisWarning.less delete mode 100644 src/pages/business_firewarning/components/RealtimeMonitoring.js delete mode 100644 src/pages/business_firewarning/components/RealtimeMonitoring.less delete mode 100644 src/pages/business_system/SystemContentList.js delete mode 100644 src/pages/business_system/SystemContentList.less delete mode 100644 src/pages/business_system/systemMenu/SystemMenuList.js delete mode 100644 src/pages/business_system/systemMenu/SystemMenuList.less delete mode 100644 src/pages/business_system/systemOrganization/SystemOrganizationList.js delete mode 100644 src/pages/business_system/systemOrganization/SystemOrganizationList.less delete mode 100644 src/pages/business_system/systemRole/SystemRoleList.js delete mode 100644 src/pages/business_system/systemRole/SystemRoleList.less delete mode 100644 src/pages/systemMenu/SystemMenuList.js delete mode 100644 src/pages/systemMenu/SystemMenuList.less delete mode 100644 src/pages/systemOrganization/SystemOrganizationList.js delete mode 100644 src/pages/systemOrganization/SystemOrganizationList.less delete mode 100644 src/pages/systemRole/SystemRoleList.js delete mode 100644 src/pages/systemRole/SystemRoleList.less diff --git a/src/pages/business_firekeynotearea/FireKeynoteArea.js b/src/pages/business_firekeynotearea/FireKeynoteArea.js deleted file mode 100644 index e4ac73b..0000000 --- a/src/pages/business_firekeynotearea/FireKeynoteArea.js +++ /dev/null @@ -1,56 +0,0 @@ -import React, { useState } from 'react'; -import { Card, Row, Col, Statistic, Progress, Button, Space } from 'antd'; -import styles from './FireKeynoteArea.less'; -import KeypartsBasicInformation from './components/KeypartsBasicInformation'; //重点部位基础信息管理 -import EmergencyPlanAssociation from './components/EmergencyPlanAssociation'; //应急预案关联管理 -import EmergencyDrillRecordAssociation from './components/EmergencyDrillRecordAssociation'; //应急演练记录关联管理 - -const FireKeynoteArea = () => { - const [activeModule, setActiveModule] = useState('1'); - - const handleModuleClick = (module) => { - setActiveModule(module) - } - - - const renderModule = () => { - switch (activeModule) { - case '1': - return ; - case '2': - return ; - case '3': - return ; - default: - return ; - } - }; - - - return ( -
-
- - - -
-
- {renderModule()} -
-
- ); -}; - -export default FireKeynoteArea; diff --git a/src/pages/business_firekeynotearea/FireKeynoteArea.less b/src/pages/business_firekeynotearea/FireKeynoteArea.less deleted file mode 100644 index b479169..0000000 --- a/src/pages/business_firekeynotearea/FireKeynoteArea.less +++ /dev/null @@ -1,66 +0,0 @@ -.container { - background-color: transparent; - width: 100%; - height: 89vh; - overflow: hidden; - display: flex; - flex-direction: column; - - .TopButton { - background-color: white; - width: 100%; - padding: 10px 30px; - display: flex; - gap: 24px; - margin-left: 6px; - - .TopButtonItem { - background-color: transparent !important; - color: #333333 !important; - font-family: 'PingFang SC', sans-serif !important; - font-weight: 500 !important; - font-size: 14px !important; - line-height: 100% !important; - border-radius: 8px !important; - padding: 6px 10px !important; - height: auto !important; - border: none !important; - box-shadow: none !important; - position: relative !important; - - &:hover { - color: #333333 !important; - border: none !important; - } - - &:focus { - color: #2E4CD4 !important; - border: none !important; - } - - &.active { - color: #2E4CD4 !important; - - &::after { - content: ''; - position: absolute; - bottom: -10px; - left: 0; - right: 0; - width: 100%; - height: 4px; - background-color: #2E4CD4; - border-radius: 0; - opacity: 1; - } - } - } - } - - .content { - // ======== 内容区域样式 ======== - flex: 1; // ======== 占据剩余空间 ======== - overflow-y: auto; // ======== 允许垂直滚动 ======== - padding: 0; // ======== 无内边距 ======== - } -} \ No newline at end of file diff --git a/src/pages/business_firekeynotearea/components/EmergencyDrillRecordAssociation.js b/src/pages/business_firekeynotearea/components/EmergencyDrillRecordAssociation.js deleted file mode 100644 index e963cc2..0000000 --- a/src/pages/business_firekeynotearea/components/EmergencyDrillRecordAssociation.js +++ /dev/null @@ -1,749 +0,0 @@ - -import React, { useEffect, useRef, useState } from 'react'; -import { Card, Result, Select, Button, Segmented, Input } from 'antd'; -import { PlusOutlined } from '@ant-design/icons'; -import * as echarts from 'echarts'; -import StandardTable from '@/components/StandardTable'; -import styles from './EmergencyDrillRecordAssociation.less'; -import eqicon1 from '@/assets/business_firekeynotearea/eqicon1.png'; -import eqicon6 from '@/assets/business_firekeynotearea/eqicon6.png'; -import eqicon7 from '@/assets/business_firekeynotearea/eqicon7.png'; -import eqicon8 from '@/assets/business_firekeynotearea/eqicon8.png'; - -const EmergencyDrillRecordAssociation = () => { - 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: 5, - total: 0, - }); - - // 饼图初始化 - useEffect(() => { - if (pieChartRef.current) { - const pieChart = echarts.init(pieChartRef.current); - - const pieOption = { - color: ['#44BB5F', '#F8C541', '#A493FB', '#4B69F1', '#949FD0'], - legend: { - orient: 'vertical', - right: '10%', - top: 'center', - itemWidth: 13, - itemHeight: 4, - textStyle: { - fontSize: 12, - color: '#333' - } - }, - series: [{ - name: '设备状态', - type: 'pie', - radius: ['40%', '70%'], - center: ['35%', '50%'], - avoidLabelOverlap: false, - label: { - show: false, - position: 'center' - }, - emphasis: { - label: { - show: true, - fontSize: '14', - fontWeight: 'bold' - } - }, - labelLine: { - show: false - }, - data: [ - { value: 480, name: '配电房' }, - { value: 289, name: '消防控制室' }, - { value: 200, name: '档案室' }, - { value: 150, name: '服务器机房' }, - { value: 161, name: '食堂厨房' } - ] - }] - }; - - pieChart.setOption(pieOption); - - // 响应式调整 - const handlePieResize = () => { - if (pieChart && !pieChart.isDisposed()) { - pieChart.resize(); - } - }; - - window.addEventListener('resize', handlePieResize); - - return () => { - window.removeEventListener('resize', handlePieResize); - if (pieChart && !pieChart.isDisposed()) { - pieChart.dispose(); - } - }; - } - }, []); - - // 故障类型饼图初始化 - useEffect(() => { - if (faultPieChartRef.current) { - const faultPieChart = echarts.init(faultPieChartRef.current); - - const faultPieOption = { - color: ['#FF3E48', '#FF8800', '#FFC403'], - legend: { - orient: 'vertical', - right: '10%', - top: 'center', - itemWidth: 8, - itemHeight: 8, - textStyle: { - fontSize: 12, - color: '#333' - } - }, - series: [{ - name: '设备故障类型', - type: 'pie', - radius: '70%', - center: ['35%', '50%'], - avoidLabelOverlap: false, - label: { - show: true, - position: 'outside', - formatter: '{b}: {c}', - fontSize: 12 - }, - emphasis: { - label: { - show: true, - fontSize: '14', - fontWeight: 'bold' - } - }, - labelLine: { - show: true - }, - data: [ - { value: 120, name: '紧急' }, - { value: 80, name: '重要' }, - { value: 60, name: '一般' } - ] - }] - }; - - faultPieChart.setOption(faultPieOption); - - // 响应式调整 - const handleFaultPieResize = () => { - if (faultPieChart && !faultPieChart.isDisposed()) { - faultPieChart.resize(); - } - }; - - window.addEventListener('resize', handleFaultPieResize); - - return () => { - window.removeEventListener('resize', handleFaultPieResize); - if (faultPieChart && !faultPieChart.isDisposed()) { - faultPieChart.dispose(); - } - }; - } - }, []); - - useEffect(() => { - if (chartRef.current) { - const chart = echarts.init(chartRef.current); - - // 强制初始化时调整大小 - setTimeout(() => { - if (chart && !chart.isDisposed()) { - chart.resize(); - } - }, 100); - - const option = { - color: ['#8979FF', '#3CC3DF'], - - legend: { - // data: ['消防水泵1', '消防水泵2'], - top: "-3px", - // left: "center", - // itemGap: 40, - itemWidth: 20, - itemHeight: 8, - // icon: 'path://M902 472.7H747.9c-19.1-113.3-117.7-200-236.4-200s-217.3 86.7-236.4 200H119.7c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h155.5c19.1 113.3 117.7 200 236.4 200S728.9 666 748 552.7h154c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8z m-390.5 200c-88.2 0-160-71.8-160-160s71.8-160 160-160 160 71.8 160 160-71.8 160-160 160z', - textStyle: { - fontSize: 10 - } - }, - grid: { - left: '2%', - right: '4%', - bottom: '2%', - top: '12%', - containLabel: true - }, - xAxis: { - type: 'category', - boundaryGap: false, - data: ['9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00'], - axisLabel: { - fontSize: 10 - } - }, - yAxis: { - type: 'value', - min: 0, - max: 30, - axisLabel: { - formatter: '{value}', - fontSize: 10 - } - }, - series: [ - { - name: '消防水泵1', - type: 'line', - smooth: false, - lineStyle: { - width: 2, - color: '#8979FF' - }, - areaStyle: { - color: { - type: 'linear', - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [ - { offset: 0, color: 'rgba(137, 121, 255, 0.3)' }, - { offset: 1, color: 'rgba(137, 121, 255, 0.05)' } - ] - } - }, - symbol: 'circle', - symbolSize: 4, - itemStyle: { - color: '#fff', - borderColor: '#8979FF', - borderWidth: 1 - }, - data: [12, 15, 18, 14, 16, 20, 22, 19, 17, 21, 23, 25] - }, - { - name: '消防水泵2', - type: 'line', - smooth: false, - lineStyle: { - width: 2, - color: '#3CC3DF' - }, - areaStyle: { - color: { - type: 'linear', - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [ - { offset: 0, color: 'rgba(60, 195, 223, 0.3)' }, - { offset: 1, color: 'rgba(60, 195, 223, 0.05)' } - ] - } - }, - symbol: 'circle', - symbolSize: 4, - itemStyle: { - color: '#fff', - borderColor: '#3CC3DF', - borderWidth: 1 - }, - data: [8, 11, 14, 10, 13, 17, 19, 16, 14, 18, 20, 22] - } - ] - }; - - 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: 'drillId', - key: 'drillId', - width: 140, - }, - { - title: '演练时间', - dataIndex: 'drillTime', - key: 'drillTime', - width: 180, - }, - { - title: '演练类型', - dataIndex: 'drillType', - key: 'drillType', - width: 120, - }, - { - title: '关联部位', - dataIndex: 'relatedPart', - key: 'relatedPart', - width: 120, - }, - { - title: '部位名称', - dataIndex: 'partName', - key: 'partName', - width: 160, - }, - { - title: '演练次数', - dataIndex: 'drillCount', - key: 'drillCount', - width: 100, - }, - { - title: '参与人数', - dataIndex: 'participantCount', - key: 'participantCount', - width: 100, - }, - { - title: '效果评估', - dataIndex: 'effect', - key: 'effect', - width: 120, - render: (text) => { - let color = '#FFF3E9', fontColor = '#FF8800', label = text; - if (text === '优秀') { - color = '#D8F7DE'; - fontColor = '#44BB5F'; - } - return ( - {label} - ); - } - }, - { - title: '操作', - key: 'action', - width: 120, - render: (_, record) => ( - <> - 编辑 - 删除 - - ), - }, - ]; - - // 表格数据（同步图片） - const mockData = [ - { - key: '1', - drillId: 'YL202310001', - drillTime: '2025-09-10 14:23:45', - drillType: '实战演练', - relatedPart: '三楼东侧', - partName: '数据机房 A区', - drillCount: 5, - participantCount: 25, - effect: '良好', - }, - { - key: '2', - drillId: 'YL202310002', - drillTime: '2025-09-10 14:23:45', - drillType: '桌面推演', - relatedPart: '二楼西侧', - partName: 'B区厨房', - drillCount: 6, - participantCount: 18, - effect: '良好', - }, - { - key: '3', - drillId: 'YL202310003', - drillTime: '2025-09-10 14:23:45', - drillType: '模拟演练', - relatedPart: '地下一层', - partName: '数据中心机房', - drillCount: 3, - participantCount: 32, - effect: '优秀', - }, - ]; - - // 初始化数据 - 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 keypartsData = [ - { - name: '配电房', - location: '1楼 - 东区', - risk: '高风险', - riskColor: '#FFE0E2', - riskTextColor: '#FF3E48', - }, - { - name: '消防控制室', - location: '1楼 - 西区', - risk: '中风险', - riskColor: '#FFF8E2', - riskTextColor: '#FFC403', - }, - { - name: '档案室', - location: '2楼 - 中区', - risk: '低风险', - riskColor: '#DAF3FF', - riskTextColor: '#00AAFA', - } - ]; - const [selectedKeypartIdx, setSelectedKeypartIdx] = useState(0); - - return ( -
- {/* 第一个div - 高度20% */} -
-
-
- {/* 块1 */} -
-
-
演练记录总数
-
120
-
-
- 演练记录总数 -
-
- - {/* 块2 */} -
-
-
重点部位数量
-
32
-
-
- 重点部位数量 -
-
- - {/* 块3 */} -
-
-
参与演练人员
-
69
-
-
- 参与演练人员 -
-
- - {/* 块4 */} -
-
-
平均演练达标率
-
72%
-
-
- 平均演练达标率 -
-
- -
-
-
- - -
-
-
-
-
-
-
重点部位分布图
-
-
- 实时定位 -
-
-
- {/* 地图图片 */} - 重点部位分布图 -
-
-
-
-
-
- 重点部位类型分布 -
- { - console.log(value); - }} - /> -
- {/* 设备状态饼图 */} -
-
- -
- -
-
-
-
- 重点部位列表 -
-
共 3 项
-
- {/* 重点部位列表 */} -
- {keypartsData.map((item, idx) => ( -
setSelectedKeypartIdx(idx)} - style={{ cursor: 'pointer' }} - > -
-
- {item.name} -
-
{item.location}
-
-
- {item.risk} -
-
- ))} -
- -
- -
-
- - {/* 第三个div - 占满剩余位置 */} -
-
- -
- {/* 表格 */} -
-
-
-
演练记录录入
-
- -
-
- {/* 搜索输入框 */} - -
-
- {/* 下拉选择 */} - - {/* 新增按钮 */} - -
-
-
- - {/* 表格 */} -
- - `共 ${total} 条`, - }} - // scroll={{ x: 1200 }} - /> -
-
-
-
-
- ); -}; - -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 deleted file mode 100644 index 88bea22..0000000 --- a/src/pages/business_firekeynotearea/components/EmergencyPlanAssociation.less +++ /dev/null @@ -1,452 +0,0 @@ -// 关联应急预案卡片列表样式 -.planListWrap { - display: flex; - flex-direction: column; - gap: 8px; - margin: 35px 0 0 0; - height: 200px; - overflow: auto; - /* 隐藏滚动条但保留滚动效果 */ - scrollbar-width: none; -} - -.planListWrap::-webkit-scrollbar { - display: none; - /* Chrome/Safari */ -} - -.planCard { - background: #F1F7FF; - // border: 1px solid #ecedfc; - border-radius: 4px; - padding: 10px 12px; - box-shadow: 0 1px 4px 0 rgba(46, 76, 212, 0.03); - 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; -} - -.planCardBtns { - display: flex; - gap: 10px; -} - -.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; -} - -.quickBtn:hover { - background: #1169FF; - color: #fff; -} - -.delBtn { - background: #FE5F60 !important; - color: #fff; - border: none; - border-radius: 4px; - font-size: 12px !important; - font-weight: 500; - padding: 0 12px; - display: flex; - align-items: center; -} - -.delBtn:hover { - background: #d9363e; - color: #fff; -} - -// 重点部位列表样式 - -.Rcontainer { - padding: 8px 6px 0px 6px; - height: 100%; - display: flex; - flex-direction: column; - gap: 10px; - - .RcontainerTop { - height: 100%; - border-radius: 4px; - display: flex; - // flex-direction: column; - background: url('@/assets/business_firekeynotearea/yj-bg.png') no-repeat center center; - background-size: cover; - - .sectionContent { - width: 100%; - height: 100%; - gap: 10px; - - .topBlock { - height: 100%; - display: flex; - flex-direction: column; - font-family: PingFang SC; - font-size: 14px; - color: #333333; - padding: 5px 10px 5px 10px; - - .topBlockTitle { - 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 { - 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; - } - } - - } - } - - // 第二个div - 高度39% - .RcontainerMiddle { - height: 100%; - border-radius: 4px; - display: flex; - flex-direction: column; - - .sectionContent { - height: 100%; - display: flex; - gap: 10px; - - .middleBlock1 { - flex: 4; - // width: 28%; - height: 100%; - background: #fff; - - border: 2px solid #fff; - // border-radius: 4px; - position: relative; - padding: 0px 10px 10px 10px; - 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; - height: 28px; - line-height: 28px; - - .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: #2E4CD4; - color: #fff; - } - } - } - - .deviceStatusChart { - position: absolute; - top: 35px; - left: 10px; - right: 10px; - bottom: 10px; - z-index: 10; - } - } - - .middleBlock2 { - flex: 4; - 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; - line-height: 28px; - height: 28px; - // 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 { - font-size: 12px; - width: 60px; - height: 20px; - line-height: 20px; - background-color: #E6E9FB; - color: #2E4CD4; - text-align: center; - border-radius: 2px; - } - } - - .middleBlock2Chart { - width: 100%; - height: 100%; - padding: 5px; - // min-height: 200px; - } - } - - } - } - - // 第三个div - 高度不超过45% - .RcontainerBottom { - height: 45%; // 限制高度不超过45% - max-height: 45%; // 确保最大高度不超过45% - // display: flex; - // flex-direction: column; - - .sectionContent { - // display: flex; - // flex-direction: row; - // gap: 10px; - padding: 0; - - .tableBlock { - width: 100%; - height: 100%; - background-color: #fff; - padding: 0; - display: flex; - flex-direction: column; - - .tableHeader { - display: flex; - justify-content: space-between; - align-items: center; - padding: 8px 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; - gap: 8px; - margin-top: 5px; - - .searchInput { - // flex: 1; - // height: 40px; - // border: 1px solid #E3E6EB; - // border-radius: 6px; - // padding: 0 16px; - // font-size: 14px; - // color: #333; - // background: #fff; - // outline: none; - // box-shadow: none; - // transition: border-color 0.2s; - } - - .searchInput:focus { - border-color: #2E4CD4; - } - - .selectAll { - // height: 40px; - // border: 1px solid #E3E6EB; - // border-radius: 6px; - // background: #fff; - // font-size: 14px; - // color: #333; - // padding: 0 32px 0 16px; - // margin-left: 12px; - } - - .selectAll:focus { - border-color: #2E4CD4; - } - - .addBtn { - background: #2E4CD4; - margin-left: 15px; - } - - .addBtn:hover { - background: #1d3bb3; - } - } - } - - .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.js b/src/pages/business_firekeynotearea/components/KeypartsBasicInformation.js deleted file mode 100644 index 07779ce..0000000 --- a/src/pages/business_firekeynotearea/components/KeypartsBasicInformation.js +++ /dev/null @@ -1,429 +0,0 @@ - -import React, { useEffect, useRef, useState } from 'react'; -import { Button, Input, Select, Tree } from 'antd'; -import { ExportOutlined, PlusOutlined } from '@ant-design/icons'; -import StandardTable from '@/components/StandardTable'; -import styles from './KeypartsBasicInformation.less'; -import eqicon1 from '@/assets/business_firekeynotearea/eqicon1.png'; -import eqicon2 from '@/assets/business_firekeynotearea/eqicon2.png'; -import eqicon3 from '@/assets/business_firekeynotearea/eqicon3.png'; -import eqicon4 from '@/assets/business_firekeynotearea/eqicon4.png'; -import eqicon5 from '@/assets/business_firekeynotearea/eqicon5.png'; - -const KeypartsBasicInformation = () => { - const [selectedRowKeys, setSelectedRowKeys] = useState([]); - const [selectedRows, setSelectedRows] = useState([]); - const [loading, setLoading] = useState(false); - const [dataSource, setDataSource] = useState([]); - const [pagination, setPagination] = useState({ - current: 1, - pageSize: 5, - total: 0, - }); - - - // 表格列定义 - const columns = [ - { - title: '编号', - dataIndex: 'id', - key: 'id', - width: 60, - fixed: 'left', - render: (text, record, index) => { - const page = pagination.current || 1; - const pageSize = pagination.pageSize || 5; - const number = (page - 1) * pageSize + index + 1; - return `0${number}`.slice(-2); - } - }, - { - title: '部位名称', - dataIndex: 'name', - key: 'name', - width: 120, - }, - { - title: '所属建筑', - dataIndex: 'building', - key: 'building', - width: 120, - }, - { - title: '类型', - dataIndex: 'type', - key: 'type', - width: 100, - }, - { - title: '标签', - dataIndex: 'tags', - key: 'tags', - width: 200, - render: (tags) => ( - <> - {tags.map((tag, idx) => { - const tagColorMap = { - '电气风险': { color: '#F9EBBC', fontColor: '#333333' }, - '重要设备': { color: '#CDDFFF', fontColor: '#333333' }, - '易燃易爆': { color: '#F8C6C6', fontColor: '#333333' }, - '人员密集': { color: '#B6E1F6', fontColor: '#333333' }, - '关键设施': { color: '#FDDBB5', fontColor: '#333333' }, - '高风险区': { color: '#F8C6C6', fontColor: '#333333' }, - }; - const style = tagColorMap[tag] || { color: '#eee', fontColor: '#666' }; - return ( - {tag} - ); - })} - - ) - }, - { - title: '状态', - dataIndex: 'status', - key: 'status', - width: 80, - render: (text) => { - const statusMap = { - '故障': { color: '#FF3E48', bg: '#FFE0E2' }, - '预警': { color: '#FF8800', bg: '#FFF3E9' }, - '正常': { color: '#44BB5F', bg: '#D8F7DE' } - }; - const status = statusMap[text] || { color: '#333', bg: '#F5F5F5' }; - return ( - - {text} - - ); - } - }, - { - title: '最后更新', - dataIndex: 'lastUpdate', - key: 'lastUpdate', - width: 120, - }, - { - title: '操作', - key: 'action', - width: 100, - align: 'center', - fixed: 'right', - render: (_, record) => ( - <> - - - - ), - }, - ]; - - // 模拟数据 - const mockData = [ - { - key: '1', - id: '001', - name: '1号办公楼', - building: '1号办公楼', - type: '配电室', - tags: ['电气风险', '重要设备'], - status: '故障', - lastUpdate: '2025-09-10', - }, - { - key: '2', - id: '002', - name: 'B区厨房', - building: '员工餐厅', - type: '厨房', - tags: ['易燃易爆', '人员密集'], - status: '预警', - lastUpdate: '2025-09-10', - }, - { - key: '3', - id: '003', - name: '数据中心机房', - building: '信息中心', - type: '数据机房', - tags: ['关键设施', '重要设备'], - status: '正常', - lastUpdate: '2025-09-10', - }, - { - key: '4', - id: '004', - name: '化学品仓库', - building: '实验楼', - type: '仓库', - tags: ['易燃易爆', '高风险区'], - status: '正常', - lastUpdate: '2025-09-10', - }, - ]; - - // 初始化数据 - 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, - })); - }; - - return ( -
- {/* 第一个div - 高度20% */} -
-
-
- {/* 块1 */} -
-
-
总重点部位数
-
1820
-
-
- 总重点部位数 -
-
- - {/* 块2 */} -
-
-
易燃易爆场所
-
386
-
-
- 易燃易爆场所 -
-
- - {/* 块3 */} -
-
-
人员密集区域
-
269
-
-
- 人员密集区域 -
-
- - {/* 块4 */} -
-
-
重要设备房
-
412
-
-
- 重要设备房 -
-
- - {/* 块5 */} -
-
-
物资储存区
-
290
-
-
- 物资储存区 -
-
- -
-
-
- - {/* 第二个div - 占满剩余位置 */} -
-
-
- - {/* 表格头部 */} -
-
-
-
消防设施与器材列表
-
-
- - {/* 搜索与操作栏 */} -
-
- {/* 搜索输入框 */} - -
-
- {/* 下拉选择 */} - } - /> - - -
-
- - {/* 表格 */} -
- - `共 ${total} 条`, - }} - // scroll={{ x: 1200 }} - /> -
-
-
-
-
- ); -}; - -export default RealtimeMonitoring; \ No newline at end of file diff --git a/src/pages/business_firewarning/components/RealtimeMonitoring.less b/src/pages/business_firewarning/components/RealtimeMonitoring.less deleted file mode 100644 index be59fd7..0000000 --- a/src/pages/business_firewarning/components/RealtimeMonitoring.less +++ /dev/null @@ -1,782 +0,0 @@ -.realtimeContainer { - padding: 8px 6px 0px 6px; - height: 100%; - display: flex; - flex-direction: column; - gap: 10px; - - // 第一个div - 高度20% - .realtimeContainerTop { - height: 16%; - // background-color: #fff; - border-radius: 4px; - display: flex; - flex-direction: column; - - .realtimeSectionContent { - height: 100%; - display: flex; - flex-direction: column; - // padding: 15px; - - .realtimeBlocksContainer { - flex: 1; - display: flex; - gap: 10px; - height: 100%; - - .realtimeBlockItem { - flex: 1; - height: 100%; - display: flex; - background: url('@/assets/business_basic/background_re.svg') no-repeat center center; - border-radius: 4px; - border: 2px solid #FFFFFF; - - .realtimeBlockLeft { - width: 60%; - height: 100%; - display: flex; - flex-direction: column; - justify-content: center; - padding: 15px; - padding-left: 20px; - gap: 8px; - - .realtimeBlockTitle { - font-family: PingFang SC; - font-weight: 400; - font-size: 12px; - color: #333333; - line-height: 1.2; - } - - .realtimeBlockNumber { - font-family: PingFang SC; - font-weight: 700; - font-size: 24px; - color: #333333; - line-height: 1.2; - } - - .realtimeBlockChange { - font-family: PingFang SC; - font-weight: 400; - font-size: 12px; - color: #1269FF; - line-height: 1.2; - display: flex; - align-items: center; - gap: 4px; - - .realtimeArrow { - font-size: 14px; - font-weight: bold; - } - - .realtimeCheckIcon { - font-size: 16px; - color: #1269FF; - } - } - } - - .realtimeBlockRight { - flex: 1; - height: 100%; - background-color: transparent; - border-radius: 0 4px 4px 0; - display: flex; - align-items: center; - justify-content: center; - - .realtimeBlockImage { - // width: 80%; - height: 65%; - // height: 80%; - object-fit: contain; - margin-right: -5px; - } - } - } - } - } - } - - // 第二个div - 高度39% - .realtimeContainerMiddle { - height: 33%; - border-radius: 4px; - display: flex; - flex-direction: column; - - .realtimeSectionContent { - height: 100%; - display: flex; - display: flex; - gap: 10px; - height: 100%; - - .realtimeMiddleBlock1 { - width: 25%; - height: 100%; - background: #fff; - border: 2px solid #fff; - position: relative; - padding: 0px 10px 10px 2px; - font-family: PingFang SC; - font-size: 14px; - color: #333333; - - .realtimeBlock1Header { - position: absolute; - top: 5px; - left: 10px; - right: 10px; - display: flex; - justify-content: space-between; - align-items: center; - z-index: 10; - - .realtimeBlock1Title { - display: flex; - align-items: center; - gap: 8px; - font-weight: 500; - font-size: 14px; - color: #333333; - - .realtimeTitleIcon { - width: 3px; - height: 14px; - background-color: #2E4CD4; - } - } - - - } - - .realtimeDeviceStatusChart { - position: absolute; - top: 35px; - left: 10px; - right: 10px; - bottom: 10px; - z-index: 10; - } - } - - .realtimeMiddleBlock12 { - width: 30%; - height: 100%; - background-color: #fff; - display: flex; - flex-direction: column; - - .parameterTitle { - display: flex; - align-items: center; - gap: 8px; - padding: 5px 10px 10px 10px; - font-size: 14px; - font-weight: 500; - color: #333; - - .realtimeTitleIcon { - width: 3px; - height: 14px; - background-color: #2E4CD4; - } - } - - - .parameterGridContainer { - display: flex; - flex-direction: column; - gap: 10px; - margin: 0 10px 10px 10px; - height: 100%; // 减去title高度和margin - - .parameterRow { - display: flex; - gap: 10px; - flex: 1; - - .parameterBlock1 { - flex: 1 1 50%; - background-color: #FFF5E9; - border: 1px solid #ECEDFC; - border-radius: 2px; - position: relative; - display: flex; - flex-direction: column; - justify-content: center; - padding: 10px; - - .warningBadge { - position: absolute; - top: 0; - right: 0; - width: 35px; - height: 20px; - background-color: #FF8800; - border-radius: 2px; - display: flex; - align-items: center; - justify-content: center; - font-size: 12px; - color: #fff; - font-weight: 420; - } - - .blockContent { - display: flex; - flex-direction: column; - gap: 5px; - margin-left: 5px; - font-family: PingFang SC; - - .parameterName { - font-size: 10px; - color: #666666; - font-weight: 400; - } - - .parameterValue { - font-size: 16px; - color: #333333; - font-weight: 500; - } - - .parameterRange { - font-size: 10px; - color: #666666; - font-weight: 400; - } - } - } - - .parameterBlock2 { - flex: 1 1 50%; - background-color: #F3FFF6; - border: 1px solid #ECEDFC; - border-radius: 2px; - position: relative; - display: flex; - flex-direction: column; - justify-content: center; - padding: 10px; - - .warningBadge { - position: absolute; - top: 0; - right: 0; - width: 35px; - height: 20px; - background-color: #44BB5F; - border-radius: 2px; - display: flex; - align-items: center; - justify-content: center; - font-size: 12px; - color: #fff; - font-weight: 420; - } - - .blockContent { - display: flex; - flex-direction: column; - gap: 5px; - margin-left: 5px; - font-family: PingFang SC; - - .parameterName { - font-size: 10px; - color: #666666; - font-weight: 400; - } - - .parameterValue { - font-size: 16px; - color: #333333; - font-weight: 500; - } - - .parameterRange { - font-size: 10px; - color: #666666; - font-weight: 400; - } - } - } - - .parameterBlock3 { - flex: 1; - background-color: #F3FFF6; - border: 1px solid #ECEDFC; - border-radius: 2px; - position: relative; - display: flex; - flex-direction: column; - justify-content: center; - padding: 10px; - - .warningBadge { - position: absolute; - top: 0; - right: 0; - width: 35px; - height: 20px; - background-color: #44BB5F; - border-radius: 2px; - display: flex; - align-items: center; - justify-content: center; - font-size: 12px; - color: #fff; - font-weight: 420; - } - - .blockContent { - display: flex; - flex-direction: column; - gap: 5px; - margin-left: 5px; - font-family: PingFang SC; - - .parameterName { - font-size: 10px; - color: #666666; - font-weight: 400; - } - - .parameterValue { - font-size: 16px; - color: #333333; - font-weight: 500; - } - - .parameterRange { - font-size: 10px; - color: #666666; - font-weight: 400; - } - } - } - - .parameterBlock4 { - flex: 1; - background-color: #FFF2F1; - border: 1px solid #ECEDFC; - border-radius: 2px; - position: relative; - display: flex; - flex-direction: column; - justify-content: center; - padding: 10px; - - .warningBadge { - position: absolute; - top: 0; - right: 0; - width: 35px; - height: 20px; - background-color: #FF2526; - border-radius: 2px; - display: flex; - align-items: center; - justify-content: center; - font-size: 12px; - color: #fff; - font-weight: 400; - } - - .blockContent { - display: flex; - flex-direction: column; - gap: 5px; - margin-left: 5px; - - .parameterName { - font-size: 10px; - color: #666666; - font-weight: 400; - } - - .parameterValue { - font-size: 16px; - color: #333333; - font-weight: 500; - } - - .parameterRange { - font-size: 10px; - color: #666666; - font-weight: 400; - } - } - } - } - } - } - - .realtimeMiddleBlock2 { - 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; - - .realtimeMiddleBlock2Title { - display: flex; - justify-content: space-between; - align-items: center; - // margin-bottom: 10px; - - - .realtimeTitleIcon { - width: 3px; - height: 14px; - background-color: #2E4CD4; - } - - .realtimeTitleLeft { - display: flex; - align-items: center; - gap: 8px; - font-weight: 500; - font-size: 14px; - color: #333333; - - } - } - - .realtimeMiddleBlock2Chart { - width: 100%; - height: 100%; - // min-height: 200px; - } - } - - } - } - - // 第三个div - 高度不超过45% - .realtimeContainerBottom { - height: 45%; // 限制高度不超过45% - max-height: 45%; // 确保最大高度不超过45% - display: flex; - flex-direction: column; - - .realtimeSectionContent { - display: flex; - flex-direction: row; - gap: 10px; - padding: 0; - - .realtimeLeftBlock { - width: 28%; - flex-shrink: 0; - height: 100%; - background: #fff; - // background-size: cover; - padding: 0; - display: flex; - flex-direction: column; - gap: 10px; - padding: 15px; - - .realtimeLeftBlockTitle { - display: flex; - align-items: center; - gap: 8px; - font-family: PingFang SC; - font-weight: 500; - font-size: 14px; - color: #333333; - margin-bottom: 10px; - - .realtimeTitleIcon { - width: 3px; - height: 16px; - background-color: #2E4CD4; - } - } - - .realtimeDevelopmentContainer { - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - gap: 8px; - - .realtimeDevelopmentBlock1 { - flex: 1; - background-color: #F1F7FF; - border-radius: 4px; - padding: 15px 20px; - display: flex; - align-items: center; - width: 100%; - } - - .realtimeDevelopmentBlockA { - flex: 1; - background-color: #FFF0EF; - border-radius: 4px; - padding: 15px 20px; - display: flex; - align-items: center; - width: 100%; - - .realtimeLeftContent { - flex: 1; - display: flex; - flex-direction: column; - gap: 8px; - min-width: 0; - - .realtimeMainText { - color: #333333; - font-size: 14px; - font-weight: 500; - font-family: PingFang SC; - width: 100%; - max-width: 500px; - } - - .realtimeSubText { - color: #666666; - font-size: 12px; - font-weight: 400; - font-family: PingFang SC; - width: 100%; - max-width: 400px; - } - } - - } - - .realtimeDevelopmentBlockB { - flex: 1; - background-color: #FFF3DA; - border-radius: 4px; - padding: 15px 20px; - display: flex; - align-items: center; - width: 100%; - - .realtimeLeftContent { - flex: 1; - display: flex; - flex-direction: column; - gap: 8px; - min-width: 0; - - .realtimeMainText { - color: #333333; - font-size: 14px; - font-weight: 500; - font-family: PingFang SC; - width: 100%; - max-width: 500px; - } - - .realtimeSubText { - color: #666666; - font-size: 12px; - font-weight: 400; - font-family: PingFang SC; - width: 100%; - max-width: 400px; - } - } - - } - - .realtimeDevelopmentBlockC { - flex: 1; - background-color: #FFF0EF; - border-radius: 4px; - padding: 15px 20px; - display: flex; - align-items: center; - width: 100%; - - .realtimeLeftContent { - flex: 1; - display: flex; - flex-direction: column; - gap: 8px; - min-width: 0; - - .realtimeMainText { - color: #333333; - font-size: 14px; - font-weight: 500; - font-family: PingFang SC; - width: 100%; - max-width: 500px; - } - - .realtimeSubText { - color: #666666; - font-size: 12px; - font-weight: 400; - font-family: PingFang SC; - width: 100%; - max-width: 400px; - } - } - - } - - .realtimeDevelopmentBlockD { - flex: 1; - background-color: #FFF3DA; - border-radius: 4px; - padding: 15px 20px; - display: flex; - align-items: center; - width: 100%; - - .realtimeLeftContent { - flex: 1; - display: flex; - flex-direction: column; - gap: 8px; - min-width: 0; - - .realtimeMainText { - color: #333333; - font-size: 14px; - font-weight: 500; - font-family: PingFang SC; - width: 100%; - max-width: 500px; - } - - .realtimeSubText { - color: #666666; - font-size: 12px; - font-weight: 400; - font-family: PingFang SC; - width: 100%; - max-width: 400px; - } - } - - } - } - } - - .realtimeRightBlock { - width: calc(100% - 28% - 10px); - height: 100%; - background-color: #fff; - padding: 0; - display: flex; - flex-direction: column; - - .realtimeTableHeader { - display: flex; - justify-content: space-between; - align-items: center; - padding: 8px 15px 5px 15px; - - .realtimeTableTitle { - display: flex; - align-items: center; - gap: 8px; - font-family: PingFang SC; - font-weight: 500; - font-size: 14px; - color: #333333; - - .realtimeTitleIcon { - width: 3px; - height: 16px; - background-color: #2E4CD4; - } - } - - .realtimeTableActions { - display: flex; - gap: 8px; - margin-top: 5px; - - .realtimeActionButton { - display: flex; - align-items: center; - gap: 4px; - height: 28px; - border: 1px solid #DFE4F6; - border-radius: 2px; - color: #2E4CD4; - font-weight: 400; - 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; - } - - .realtimeButtonIcon { - font-size: 14px; - font-weight: bold; - } - } - } - } - - .realtimeTableContainer { - 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_system/SystemContentList.js b/src/pages/business_system/SystemContentList.js deleted file mode 100644 index d7d40d3..0000000 --- a/src/pages/business_system/SystemContentList.js +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { Outlet } from '@umijs/max'; -import './SystemContentList.less'; - -const SystemContentList = () => { - return ( -
-
- -
-
- ); -}; - -export default SystemContentList; \ No newline at end of file diff --git a/src/pages/business_system/SystemContentList.less b/src/pages/business_system/SystemContentList.less deleted file mode 100644 index cf4557c..0000000 --- a/src/pages/business_system/SystemContentList.less +++ /dev/null @@ -1,10 +0,0 @@ -.systemContentContainer { - width: 100%; - height: 100%; -} - -.systemContentMain { - width: 100%; - height: 100%; - padding: 12px; -} \ No newline at end of file diff --git a/src/pages/business_system/systemMenu/SystemMenuList.js b/src/pages/business_system/systemMenu/SystemMenuList.js deleted file mode 100644 index ee8176c..0000000 --- a/src/pages/business_system/systemMenu/SystemMenuList.js +++ /dev/null @@ -1,408 +0,0 @@ -import React from 'react'; -import { - DeleteOutlined, - EditOutlined, - PlusOutlined, - SearchOutlined, - RedoOutlined, - DownOutlined, - ExclamationCircleFilled, - UpOutlined, - InfoCircleFilled, - QuestionCircleFilled, - DownloadOutlined -} from '@ant-design/icons'; -import {connect, history} from '@umijs/max'; -import {Button, Card, Divider, Dropdown, message, Modal, Popconfirm, Space, Switch, Tag, Row, Col, Tree} from 'antd'; -import StandardTable from '@/components/StandardTable'; - -import { MyIcon } from "@/components/Icon" -import style from "@/global.less"; -import styles from './SystemMenuList.less'; -import datadictionary from "@/utils/dataDictionary"; -import {formatDate} from "@/utils/formatUtils"; -import { formatDictText, checkButtonAuthority } from "@/utils/globalCommon"; - -const { confirm } = Modal; - -// 菜单类型 -const menu_type = datadictionary.menu_type || []; -const menu_status = datadictionary.menu_status || []; -const menu_level = datadictionary.menu_level || []; - -const mockData = { - list: [ - { - id: '1', - name: '效率管理', - code: 'hrefficiency', - type: '1', - level: '1', - status: '1', - path: '/topnavbar00/hrefficiency', - component: '', - icon: 'setting', - createTime: '2023-01-01 10:00:00', - createUser: 'admin', - children: [ - { - id: '2', - name: '工时仪表盘', - code: 'timesheet', - type: '2', - level: '2', - status: '1', - path: '/topnavbar00/hrefficiency/timesheet', - component: './hrefficiency_timesheet/TimeSheetList', - icon: 'dashboard', - createTime: '2023-01-01 10:05:00', - createUser: 'admin' - }, - { - id: '3', - name: '员工仪表盘', - code: 'staffsheet', - type: '2', - level: '2', - status: '1', - path: '/topnavbar00/hrefficiency/staffsheet', - component: './hrefficiency_staffsheet/StaffSheetList', - icon: 'user', - createTime: '2023-01-01 10:10:00', - createUser: 'admin' - } - ] - }, - { - id: '4', - name: '系统管理', - code: 'system', - type: '1', - level: '1', - status: '1', - path: '/topnavbar00/hrefficiency/system', - component: './nav_system_content/SystemContentList', - icon: 'control', - createTime: '2023-01-02 14:30:00', - createUser: 'admin' - } - ], - pagination: { - total: 2, - pageSize: 10, - current: 1 - } -}; - -@connect(({ systemMenu }) => ({ - systemMenu -})) -export default class SystemMenuList extends React.Component { - state = { - selectedRows: [], - advancedFormVisible: false, - filterData: {}, - pagination: { - pageSize: 10, - current: 1 - }, - tableData: mockData.list, - treeData: [], - expandedKeys: [] - }; - - componentDidMount() { - this.getMenuList(); - this.buildTreeData(); - } - - // 获取菜单列表 - getMenuList = () => { - const { dispatch } = this.props; - const { pagination, filterData } = this.state; - - try { - dispatch({ - type: 'systemMenu/fetchList', - payload: { - pageNum: pagination.current, - pageSize: pagination.pageSize, - ...filterData - }, - callback: (res) => { - this.setState({ - tableData: res?.list || mockData.list, - pagination: { - ...pagination, - total: res?.total || mockData.pagination.total - } - }, () => { - this.buildTreeData(); - }); - } - }); - } catch (error) { - console.error('获取菜单列表失败:', error); - this.setState({ - tableData: mockData.list, - pagination: mockData.pagination - }, () => { - this.buildTreeData(); - }); - } - }; - - // 构建树数据 - buildTreeData = () => { - const { tableData } = this.state; - const treeData = this.transformToTree(tableData); - this.setState({ treeData }); - }; - - // 转换为树结构 - transformToTree = (data) => { - return data.map(item => { - const node = { - title: item.name, - key: item.id, - dataRef: item - }; - if (item.children && item.children.length > 0) { - node.children = this.transformToTree(item.children); - } - return node; - }); - }; - - // 表格选择变化 - handleSelectChange = (selectedRowKeys, selectedRows) => { - this.setState({ selectedRows }); - }; - - // 分页变化 - handleTableChange = (pagination) => { - this.setState({ - pagination: { - ...this.state.pagination, - current: pagination.current - } - }, () => { - this.getMenuList(); - }); - }; - - // 新增菜单 - handleAdd = () => { - // 新增逻辑 - message.success('新增菜单功能'); - }; - - // 编辑菜单 - handleEdit = (record) => { - // 编辑逻辑 - message.success('编辑菜单功能'); - }; - - // 删除菜单 - handleDelete = (record) => { - confirm({ - title: '确定要删除这个菜单吗?', - icon: , - onOk: () => { - // 删除逻辑 - message.success('删除菜单成功'); - } - }); - }; - - // 批量删除 - handleBatchDelete = () => { - const { selectedRows } = this.state; - if (selectedRows.length === 0) { - message.warning('请选择要删除的菜单'); - return; - } - confirm({ - title: `确定要删除选中的${selectedRows.length}个菜单吗?`, - icon: , - onOk: () => { - // 批量删除逻辑 - message.success('批量删除菜单成功'); - } - }); - }; - - // 启用/禁用菜单 - handleStatusChange = (record) => { - const newStatus = record.status === '1' ? '0' : '1'; - confirm({ - title: `确定要${newStatus === '1' ? '启用' : '禁用'}这个菜单吗?`, - icon: , - onOk: () => { - // 状态变更逻辑 - message.success(`${newStatus === '1' ? '启用' : '禁用'}菜单成功`); - } - }); - }; - - // 展开/折叠树节点 - handleExpand = (expandedKeys) => { - this.setState({ expandedKeys }); - }; - - // 点击树节点 - handleTreeSelect = (selectedKeys, info) => { - // 树节点选择逻辑 - console.log('Selected', selectedKeys, info); - }; - - render() { - const { selectedRows, tableData, pagination, treeData, expandedKeys } = this.state; - - const columns = [ - { - title: '菜单名称', - dataIndex: 'name', - key: 'name', - ellipsis: true - }, - { - title: '菜单编码', - dataIndex: 'code', - key: 'code', - ellipsis: true - }, - { - title: '菜单类型', - dataIndex: 'type', - key: 'type', - render: text => formatDictText(menu_type, text) - }, - { - title: '菜单级别', - dataIndex: 'level', - key: 'level', - render: text => formatDictText(menu_level, text) - }, - { - title: '路径', - dataIndex: 'path', - key: 'path', - ellipsis: true - }, - { - title: '状态', - dataIndex: 'status', - key: 'status', - render: text => ( - - {text === '1' ? '启用' : '禁用'} - - ) - }, - { - title: '创建时间', - dataIndex: 'createTime', - key: 'createTime', - ellipsis: true - }, - { - title: '创建人', - dataIndex: 'createUser', - key: 'createUser', - ellipsis: true - }, - { - title: '操作', - key: 'action', - fixed: 'right', - width: 160, - render: (_, record) => ( - - - - this.handleStatusChange(record)} - /> - - ) - } - ]; - - return ( -
- -
-
-

菜单配置

-
-
- - -
-
- - - -
-
-

菜单树

-
- -
-
- - - - -
- -
- ); - } -} \ No newline at end of file diff --git a/src/pages/business_system/systemMenu/SystemMenuList.less b/src/pages/business_system/systemMenu/SystemMenuList.less deleted file mode 100644 index 39b5dcb..0000000 --- a/src/pages/business_system/systemMenu/SystemMenuList.less +++ /dev/null @@ -1,112 +0,0 @@ -.header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 16px; -} - -.headerLeft { - display: flex; - align-items: center; -} - -.headerRight { - display: flex; - align-items: center; -} - -.title { - margin: 0; - font-size: 18px; - font-weight: 500; - color: rgba(0, 0, 0, 0.85); -} - -.filterSection { - margin-bottom: 16px; -} - -.filterRow { - display: flex; - align-items: center; - margin-bottom: 12px; -} - -.filterItem { - margin-right: 16px; -} - -.actionButtons { - display: flex; - align-items: center; -} - -.batchAction { - margin-right: 12px; -} - -.formContainer { - padding: 24px; - background-color: #f5f5f5; -} - -.formHeader { - margin-bottom: 16px; - padding-bottom: 8px; - border-bottom: 1px solid #e8e8e8; -} - -.formTitle { - margin: 0; - font-size: 16px; - font-weight: 500; - color: rgba(0, 0, 0, 0.85); -} - -.formContent { - background-color: #fff; - padding: 24px; - border-radius: 2px; -} - -.formFooter { - display: flex; - justify-content: flex-end; - margin-top: 24px; -} - -.formButton { - margin-left: 12px; -} - -.menuContent { - width: 100%; -} - -.menuTreeSection { - margin-bottom: 20px; -} - -.sectionTitle { - margin: 0 0 12px 0; - font-size: 16px; - font-weight: 500; - color: rgba(0, 0, 0, 0.85); -} - -.menuTree { - border: 1px solid #e8e8e8; - min-height: 200px; -} - -.tree { - background-color: transparent; -} - -.tree .ant-tree-node-selected { - background-color: #e6f7ff; -} - -.tree .ant-tree-node-selected:hover { - background-color: #bae7ff; -} \ No newline at end of file diff --git a/src/pages/business_system/systemOrganization/SystemOrganizationList.js b/src/pages/business_system/systemOrganization/SystemOrganizationList.js deleted file mode 100644 index e0c919c..0000000 --- a/src/pages/business_system/systemOrganization/SystemOrganizationList.js +++ /dev/null @@ -1,314 +0,0 @@ -import React from 'react'; -import { - DeleteOutlined, - EditOutlined, - PlusOutlined, - SearchOutlined, - RedoOutlined, - DownOutlined, - ExclamationCircleFilled, - UpOutlined, - InfoCircleFilled, - QuestionCircleFilled, - DownloadOutlined -} from '@ant-design/icons'; -import {connect, history} from '@umijs/max'; -import {Button, Card, Divider, Dropdown, message, Modal, Popconfirm, Space, Switch, Tag, Row, Col} from 'antd'; -import StandardTable from '@/components/StandardTable'; - -import { MyIcon } from "@/components/Icon" -import style from "@/global.less"; -import styles from './SystemOrganizationList.less'; -import datadictionary from "@/utils/dataDictionary"; -import {formatDate} from "@/utils/formatUtils"; -import { formatDictText, checkButtonAuthority } from "@/utils/globalCommon"; - -const { confirm } = Modal; - -// 组织类型 -const organization_type = datadictionary.organization_type || []; -const organization_status = datadictionary.organization_status || []; - -const mockData = { - list: [ - { - id: '1', - name: '总部', - code: 'HQ', - type: '1', - parentId: '0', - status: '1', - createTime: '2023-01-01 10:00:00', - createUser: 'admin' - }, - { - id: '2', - name: '研发部', - code: 'R&D', - type: '2', - parentId: '1', - status: '1', - createTime: '2023-01-02 14:30:00', - createUser: 'admin' - }, - { - id: '3', - name: '市场部', - code: 'MKT', - type: '2', - parentId: '1', - status: '1', - createTime: '2023-01-03 09:15:00', - createUser: 'admin' - } - ], - pagination: { - total: 3, - pageSize: 10, - current: 1 - } -}; - -@connect(({ systemOrganization }) => ({ - systemOrganization -})) -export default class SystemOrganizationList extends React.Component { - state = { - selectedRows: [], - advancedFormVisible: false, - filterData: {}, - pagination: { - pageSize: 10, - current: 1 - }, - tableData: mockData.list - }; - - componentDidMount() { - this.getOrganizationList(); - } - - // 获取组织列表 - getOrganizationList = () => { - const { dispatch } = this.props; - const { pagination, filterData } = this.state; - - try { - dispatch({ - type: 'systemOrganization/fetchList', - payload: { - pageNum: pagination.current, - pageSize: pagination.pageSize, - ...filterData - }, - callback: (res) => { - this.setState({ - tableData: res?.list || mockData.list, - pagination: { - ...pagination, - total: res?.total || mockData.pagination.total - } - }); - } - }); - } catch (error) { - console.error('获取组织列表失败:', error); - this.setState({ - tableData: mockData.list, - pagination: mockData.pagination - }); - } - }; - - // 表格选择变化 - handleSelectChange = (selectedRowKeys, selectedRows) => { - this.setState({ selectedRows }); - }; - - // 分页变化 - handleTableChange = (pagination) => { - this.setState({ - pagination: { - ...this.state.pagination, - current: pagination.current - } - }, () => { - this.getOrganizationList(); - }); - }; - - // 新增组织 - handleAdd = () => { - // 新增逻辑 - message.success('新增组织功能'); - }; - - // 编辑组织 - handleEdit = (record) => { - // 编辑逻辑 - message.success('编辑组织功能'); - }; - - // 删除组织 - handleDelete = (record) => { - confirm({ - title: '确定要删除这个组织吗?', - icon: , - onOk: () => { - // 删除逻辑 - message.success('删除组织成功'); - } - }); - }; - - // 批量删除 - handleBatchDelete = () => { - const { selectedRows } = this.state; - if (selectedRows.length === 0) { - message.warning('请选择要删除的组织'); - return; - } - confirm({ - title: `确定要删除选中的${selectedRows.length}个组织吗?`, - icon: , - onOk: () => { - // 批量删除逻辑 - message.success('批量删除组织成功'); - } - }); - }; - - // 启用/禁用组织 - handleStatusChange = (record) => { - const newStatus = record.status === '1' ? '0' : '1'; - confirm({ - title: `确定要${newStatus === '1' ? '启用' : '禁用'}这个组织吗?`, - icon: , - onOk: () => { - // 状态变更逻辑 - message.success(`${newStatus === '1' ? '启用' : '禁用'}组织成功`); - } - }); - }; - - render() { - const { selectedRows, tableData, pagination } = this.state; - - const columns = [ - { - title: '组织名称', - dataIndex: 'name', - key: 'name', - ellipsis: true - }, - { - title: '组织编码', - dataIndex: 'code', - key: 'code', - ellipsis: true - }, - { - title: '组织类型', - dataIndex: 'type', - key: 'type', - render: text => formatDictText(organization_type, text) - }, - { - title: '状态', - dataIndex: 'status', - key: 'status', - render: text => ( - - {text === '1' ? '启用' : '禁用'} - - ) - }, - { - title: '创建时间', - dataIndex: 'createTime', - key: 'createTime', - ellipsis: true - }, - { - title: '创建人', - dataIndex: 'createUser', - key: 'createUser', - ellipsis: true - }, - { - title: '操作', - key: 'action', - fixed: 'right', - width: 160, - render: (_, record) => ( - - - - this.handleStatusChange(record)} - /> - - ) - } - ]; - - return ( -
- -
-
-

组织管理

-
-
- - -
-
- - - - - -
- ); - } -} \ No newline at end of file diff --git a/src/pages/business_system/systemOrganization/SystemOrganizationList.less b/src/pages/business_system/systemOrganization/SystemOrganizationList.less deleted file mode 100644 index 9b7b87b..0000000 --- a/src/pages/business_system/systemOrganization/SystemOrganizationList.less +++ /dev/null @@ -1,80 +0,0 @@ -.header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 16px; -} - -.headerLeft { - display: flex; - align-items: center; -} - -.headerRight { - display: flex; - align-items: center; -} - -.title { - margin: 0; - font-size: 18px; - font-weight: 500; - color: rgba(0, 0, 0, 0.85); -} - -.filterSection { - margin-bottom: 16px; -} - -.filterRow { - display: flex; - align-items: center; - margin-bottom: 12px; -} - -.filterItem { - margin-right: 16px; -} - -.actionButtons { - display: flex; - align-items: center; -} - -.batchAction { - margin-right: 12px; -} - -.formContainer { - padding: 24px; - background-color: #f5f5f5; -} - -.formHeader { - margin-bottom: 16px; - padding-bottom: 8px; - border-bottom: 1px solid #e8e8e8; -} - -.formTitle { - margin: 0; - font-size: 16px; - font-weight: 500; - color: rgba(0, 0, 0, 0.85); -} - -.formContent { - background-color: #fff; - padding: 24px; - border-radius: 2px; -} - -.formFooter { - display: flex; - justify-content: flex-end; - margin-top: 24px; -} - -.formButton { - margin-left: 12px; -} \ No newline at end of file diff --git a/src/pages/business_system/systemRole/SystemRoleList.js b/src/pages/business_system/systemRole/SystemRoleList.js deleted file mode 100644 index 7d805e0..0000000 --- a/src/pages/business_system/systemRole/SystemRoleList.js +++ /dev/null @@ -1,333 +0,0 @@ -import React from 'react'; -import { - DeleteOutlined, - EditOutlined, - PlusOutlined, - SearchOutlined, - RedoOutlined, - DownOutlined, - ExclamationCircleFilled, - UpOutlined, - InfoCircleFilled, - QuestionCircleFilled, - DownloadOutlined -} from '@ant-design/icons'; -import {connect, history} from '@umijs/max'; -import {Button, Card, Divider, Dropdown, message, Modal, Popconfirm, Space, Switch, Tag, Row, Col} from 'antd'; -import StandardTable from '@/components/StandardTable'; - -import { MyIcon } from "@/components/Icon" -import style from "@/global.less"; -import styles from './SystemRoleList.less'; -import datadictionary from "@/utils/dataDictionary"; -import {formatDate} from "@/utils/formatUtils"; -import { formatDictText, checkButtonAuthority } from "@/utils/globalCommon"; - -const { confirm } = Modal; - -// 角色类型 -const role_type = datadictionary.role_type || []; -const role_status = datadictionary.role_status || []; - -const mockData = { - list: [ - { - id: '1', - name: '超级管理员', - code: 'SUPER_ADMIN', - type: '1', - status: '1', - createTime: '2023-01-01 10:00:00', - createUser: 'admin', - remark: '系统最高权限角色' - }, - { - id: '2', - name: '部门管理员', - code: 'DEPT_ADMIN', - type: '2', - status: '1', - createTime: '2023-01-02 14:30:00', - createUser: 'admin', - remark: '部门级管理权限' - }, - { - id: '3', - name: '普通用户', - code: 'NORMAL_USER', - type: '3', - status: '1', - createTime: '2023-01-03 09:15:00', - createUser: 'admin', - remark: '基础功能访问权限' - } - ], - pagination: { - total: 3, - pageSize: 10, - current: 1 - } -}; - -@connect(({ systemRole }) => ({ - systemRole -})) -export default class SystemRoleList extends React.Component { - state = { - selectedRows: [], - advancedFormVisible: false, - filterData: {}, - pagination: { - pageSize: 10, - current: 1 - }, - tableData: mockData.list - }; - - componentDidMount() { - this.getRoleList(); - } - - // 获取角色列表 - getRoleList = () => { - const { dispatch } = this.props; - const { pagination, filterData } = this.state; - - try { - dispatch({ - type: 'systemRole/fetchList', - payload: { - pageNum: pagination.current, - pageSize: pagination.pageSize, - ...filterData - }, - callback: (res) => { - this.setState({ - tableData: res?.list || mockData.list, - pagination: { - ...pagination, - total: res?.total || mockData.pagination.total - } - }); - } - }); - } catch (error) { - console.error('获取角色列表失败:', error); - this.setState({ - tableData: mockData.list, - pagination: mockData.pagination - }); - } - }; - - // 表格选择变化 - handleSelectChange = (selectedRowKeys, selectedRows) => { - this.setState({ selectedRows }); - }; - - // 分页变化 - handleTableChange = (pagination) => { - this.setState({ - pagination: { - ...this.state.pagination, - current: pagination.current - } - }, () => { - this.getRoleList(); - }); - }; - - // 新增角色 - handleAdd = () => { - // 新增逻辑 - message.success('新增角色功能'); - }; - - // 编辑角色 - handleEdit = (record) => { - // 编辑逻辑 - message.success('编辑角色功能'); - }; - - // 角色授权 - handleAuth = (record) => { - // 授权逻辑 - message.success('角色授权功能'); - }; - - // 删除角色 - handleDelete = (record) => { - confirm({ - title: '确定要删除这个角色吗?', - icon: , - onOk: () => { - // 删除逻辑 - message.success('删除角色成功'); - } - }); - }; - - // 批量删除 - handleBatchDelete = () => { - const { selectedRows } = this.state; - if (selectedRows.length === 0) { - message.warning('请选择要删除的角色'); - return; - } - confirm({ - title: `确定要删除选中的${selectedRows.length}个角色吗?`, - icon: , - onOk: () => { - // 批量删除逻辑 - message.success('批量删除角色成功'); - } - }); - }; - - // 启用/禁用角色 - handleStatusChange = (record) => { - const newStatus = record.status === '1' ? '0' : '1'; - confirm({ - title: `确定要${newStatus === '1' ? '启用' : '禁用'}这个角色吗?`, - icon: , - onOk: () => { - // 状态变更逻辑 - message.success(`${newStatus === '1' ? '启用' : '禁用'}角色成功`); - } - }); - }; - - render() { - const { selectedRows, tableData, pagination } = this.state; - - const columns = [ - { - title: '角色名称', - dataIndex: 'name', - key: 'name', - ellipsis: true - }, - { - title: '角色编码', - dataIndex: 'code', - key: 'code', - ellipsis: true - }, - { - title: '角色类型', - dataIndex: 'type', - key: 'type', - render: text => formatDictText(role_type, text) - }, - { - title: '状态', - dataIndex: 'status', - key: 'status', - render: text => ( - - {text === '1' ? '启用' : '禁用'} - - ) - }, - { - title: '创建时间', - dataIndex: 'createTime', - key: 'createTime', - ellipsis: true - }, - { - title: '创建人', - dataIndex: 'createUser', - key: 'createUser', - ellipsis: true - }, - { - title: '备注', - dataIndex: 'remark', - key: 'remark', - ellipsis: true - }, - { - title: '操作', - key: 'action', - fixed: 'right', - width: 200, - render: (_, record) => ( - - - - - this.handleStatusChange(record)} - /> - - ) - } - ]; - - return ( -
- -
-
-

角色配置

-
-
- - -
-
- - - - - -
- ); - } -} \ No newline at end of file diff --git a/src/pages/business_system/systemRole/SystemRoleList.less b/src/pages/business_system/systemRole/SystemRoleList.less deleted file mode 100644 index 9b7b87b..0000000 --- a/src/pages/business_system/systemRole/SystemRoleList.less +++ /dev/null @@ -1,80 +0,0 @@ -.header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 16px; -} - -.headerLeft { - display: flex; - align-items: center; -} - -.headerRight { - display: flex; - align-items: center; -} - -.title { - margin: 0; - font-size: 18px; - font-weight: 500; - color: rgba(0, 0, 0, 0.85); -} - -.filterSection { - margin-bottom: 16px; -} - -.filterRow { - display: flex; - align-items: center; - margin-bottom: 12px; -} - -.filterItem { - margin-right: 16px; -} - -.actionButtons { - display: flex; - align-items: center; -} - -.batchAction { - margin-right: 12px; -} - -.formContainer { - padding: 24px; - background-color: #f5f5f5; -} - -.formHeader { - margin-bottom: 16px; - padding-bottom: 8px; - border-bottom: 1px solid #e8e8e8; -} - -.formTitle { - margin: 0; - font-size: 16px; - font-weight: 500; - color: rgba(0, 0, 0, 0.85); -} - -.formContent { - background-color: #fff; - padding: 24px; - border-radius: 2px; -} - -.formFooter { - display: flex; - justify-content: flex-end; - margin-top: 24px; -} - -.formButton { - margin-left: 12px; -} \ No newline at end of file diff --git a/src/pages/systemMenu/SystemMenuList.js b/src/pages/systemMenu/SystemMenuList.js deleted file mode 100644 index 57b49e2..0000000 --- a/src/pages/systemMenu/SystemMenuList.js +++ /dev/null @@ -1,402 +0,0 @@ -import React from 'react'; -import { - DeleteOutlined, - EditOutlined, - PlusOutlined, - SearchOutlined, - RedoOutlined, - DownOutlined, - ExclamationCircleFilled, - UpOutlined, - InfoCircleFilled, - QuestionCircleFilled, - DownloadOutlined -} from '@ant-design/icons'; -import {connect, history} from '@umijs/max'; -import {Button, Card, Divider, Dropdown, message, Modal, Popconfirm, Space, Switch, Tag, Row, Col, Tree} from 'antd'; -import StandardTable from '@/components/StandardTable'; - -import { MyIcon } from "@/components/Icon" -import style from "@/global.less"; -import styles from './SystemMenuList.less'; -import datadictionary from "@/utils/dataDictionary"; -import {formatDate} from "@/utils/formatUtils"; -import { formatDictText, checkButtonAuthority } from "@/utils/globalCommon"; - -const { confirm } = Modal; - -// 菜单类型 -const menu_type = datadictionary.menu_type || []; -const menu_status = datadictionary.menu_status || []; -const menu_level = datadictionary.menu_level || []; - -const mockData = { - list: [ - { - id: '1', - name: '效率管理', - code: 'hrefficiency', - type: '1', - level: '1', - status: '1', - path: '/topnavbar00/hrefficiency', - component: '', - icon: 'setting', - createTime: '2023-01-01 10:00:00', - createUser: 'admin', - children: [ - { - id: '2', - name: '工时仪表盘', - code: 'timesheet', - type: '2', - level: '2', - status: '1', - path: '/topnavbar00/hrefficiency/timesheet', - component: './hrefficiency_timesheet/TimeSheetList', - icon: 'dashboard', - createTime: '2023-01-01 10:05:00', - createUser: 'admin' - }, - { - id: '3', - name: '员工仪表盘', - code: 'staffsheet', - type: '2', - level: '2', - status: '1', - path: '/topnavbar00/hrefficiency/staffsheet', - component: './hrefficiency_staffsheet/StaffSheetList', - icon: 'user', - createTime: '2023-01-01 10:10:00', - createUser: 'admin' - } - ] - }, - { - id: '4', - name: '系统管理', - code: 'system', - type: '1', - level: '1', - status: '1', - path: '/topnavbar00/hrefficiency/system', - component: './nav_system_content/SystemContentList', - icon: 'control', - createTime: '2023-01-02 14:30:00', - createUser: 'admin' - } - ], - pagination: { - total: 2, - pageSize: 10, - current: 1 - } -}; - -@connect(({ systemMenu, loading }) => ({ - systemMenu, - loading: loading.models.systemMenu -})) -export default class SystemMenuList extends React.Component { - state = { - selectedRows: [], - loading: false, - advancedFormVisible: false, - filterData: {}, - pagination: { - pageSize: 10, - current: 1 - }, - tableData: mockData.list, - treeData: [], - expandedKeys: [] - }; - - componentDidMount() { - this.getMenuList(); - this.buildTreeData(); - } - - // 获取菜单列表 - getMenuList = () => { - const { dispatch } = this.props; - const { pagination, filterData } = this.state; - this.setState({ loading: true }); - dispatch({ - type: 'systemMenu/fetchList', - payload: { - pageNum: pagination.current, - pageSize: pagination.pageSize, - ...filterData - }, - callback: (res) => { - this.setState({ - loading: false, - tableData: res?.list || [], - pagination: { - ...pagination, - total: res?.total || 0 - } - }, () => { - this.buildTreeData(); - }); - } - }); - }; - - // 构建树数据 - buildTreeData = () => { - const { tableData } = this.state; - const treeData = this.transformToTree(tableData); - this.setState({ treeData }); - }; - - // 转换为树结构 - transformToTree = (data) => { - return data.map(item => { - const node = { - title: item.name, - key: item.id, - dataRef: item - }; - if (item.children && item.children.length > 0) { - node.children = this.transformToTree(item.children); - } - return node; - }); - }; - - // 表格选择变化 - handleSelectChange = (selectedRowKeys, selectedRows) => { - this.setState({ selectedRows }); - }; - - // 分页变化 - handleTableChange = (pagination) => { - this.setState({ - pagination: { - ...this.state.pagination, - current: pagination.current - } - }, () => { - this.getMenuList(); - }); - }; - - // 新增菜单 - handleAdd = () => { - // 新增逻辑 - message.success('新增菜单功能'); - }; - - // 编辑菜单 - handleEdit = (record) => { - // 编辑逻辑 - message.success('编辑菜单功能'); - }; - - // 删除菜单 - handleDelete = (record) => { - confirm({ - title: '确定要删除这个菜单吗?', - icon: , - onOk: () => { - // 删除逻辑 - message.success('删除菜单成功'); - } - }); - }; - - // 批量删除 - handleBatchDelete = () => { - const { selectedRows } = this.state; - if (selectedRows.length === 0) { - message.warning('请选择要删除的菜单'); - return; - } - confirm({ - title: `确定要删除选中的${selectedRows.length}个菜单吗?`, - icon: , - onOk: () => { - // 批量删除逻辑 - message.success('批量删除菜单成功'); - } - }); - }; - - // 启用/禁用菜单 - handleStatusChange = (record) => { - const newStatus = record.status === '1' ? '0' : '1'; - confirm({ - title: `确定要${newStatus === '1' ? '启用' : '禁用'}这个菜单吗?`, - icon: , - onOk: () => { - // 状态变更逻辑 - message.success(`${newStatus === '1' ? '启用' : '禁用'}菜单成功`); - } - }); - }; - - // 展开/折叠树节点 - handleExpand = (expandedKeys) => { - this.setState({ expandedKeys }); - }; - - // 点击树节点 - handleTreeSelect = (selectedKeys, info) => { - // 树节点选择逻辑 - console.log('Selected', selectedKeys, info); - }; - - render() { - const { selectedRows, loading, tableData, pagination, treeData, expandedKeys } = this.state; - - const columns = [ - { - title: '菜单名称', - dataIndex: 'name', - key: 'name', - ellipsis: true - }, - { - title: '菜单编码', - dataIndex: 'code', - key: 'code', - ellipsis: true - }, - { - title: '菜单类型', - dataIndex: 'type', - key: 'type', - render: text => formatDictText(menu_type, text) - }, - { - title: '菜单级别', - dataIndex: 'level', - key: 'level', - render: text => formatDictText(menu_level, text) - }, - { - title: '路径', - dataIndex: 'path', - key: 'path', - ellipsis: true - }, - { - title: '状态', - dataIndex: 'status', - key: 'status', - render: text => ( - - {text === '1' ? '启用' : '禁用'} - - ) - }, - { - title: '创建时间', - dataIndex: 'createTime', - key: 'createTime', - ellipsis: true - }, - { - title: '创建人', - dataIndex: 'createUser', - key: 'createUser', - ellipsis: true - }, - { - title: '操作', - key: 'action', - fixed: 'right', - width: 160, - render: (_, record) => ( - - - - this.handleStatusChange(record)} - /> - - ) - } - ]; - - return ( -
- -
-
-

菜单配置

-
-
- - -
-
- - - -
-
-

菜单树

-
- -
-
- - - - -
- -
- ); - } -} \ No newline at end of file diff --git a/src/pages/systemMenu/SystemMenuList.less b/src/pages/systemMenu/SystemMenuList.less deleted file mode 100644 index 1e700fb..0000000 --- a/src/pages/systemMenu/SystemMenuList.less +++ /dev/null @@ -1,115 +0,0 @@ -.header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 16px; -} - -.headerLeft { - display: flex; - align-items: center; -} - -.headerRight { - display: flex; - align-items: center; -} - -.title { - margin: 0; - font-size: 18px; - font-weight: 500; - color: rgba(0, 0, 0, 0.85); -} - -.filterSection { - margin-bottom: 16px; -} - -.filterRow { - display: flex; - align-items: center; - margin-bottom: 12px; -} - -.filterItem { - margin-right: 16px; -} - -.actionButtons { - display: flex; - align-items: center; -} - -.batchAction { - margin-right: 12px; -} - -.formContainer { - padding: 24px; - background-color: #f5f5f5; -} - -.formHeader { - margin-bottom: 16px; - padding-bottom: 8px; - border-bottom: 1px solid #e8e8e8; -} - -.formTitle { - margin: 0; - font-size: 16px; - font-weight: 500; - color: rgba(0, 0, 0, 0.85); -} - -.formContent { - background-color: #fff; - padding: 24px; - border-radius: 2px; -} - -.formFooter { - display: flex; - justify-content: flex-end; - margin-top: 24px; -} - -.formButton { - margin-left: 12px; -} - -.menuContent { - width: 100%; -} - -.menuTreeSection { - margin-bottom: 24px; -} - -.sectionTitle { - margin: 0 0 12px 0; - font-size: 16px; - font-weight: 500; - color: rgba(0, 0, 0, 0.85); -} - -.menuTree { - background-color: #fafafa; - padding: 16px; - border-radius: 4px; - border: 1px solid #e8e8e8; - min-height: 200px; -} - -.tree { - background-color: transparent; -} - -.tree .ant-tree-node-selected { - background-color: #e6f7ff; -} - -.tree .ant-tree-node-selected:hover { - background-color: #bae7ff; -} \ No newline at end of file diff --git a/src/pages/systemOrganization/SystemOrganizationList.js b/src/pages/systemOrganization/SystemOrganizationList.js deleted file mode 100644 index 77ea533..0000000 --- a/src/pages/systemOrganization/SystemOrganizationList.js +++ /dev/null @@ -1,310 +0,0 @@ -import React from 'react'; -import { - DeleteOutlined, - EditOutlined, - PlusOutlined, - SearchOutlined, - RedoOutlined, - DownOutlined, - ExclamationCircleFilled, - UpOutlined, - InfoCircleFilled, - QuestionCircleFilled, - DownloadOutlined -} from '@ant-design/icons'; -import {connect, history} from '@umijs/max'; -import {Button, Card, Divider, Dropdown, message, Modal, Popconfirm, Space, Switch, Tag, Row, Col} from 'antd'; -import StandardTable from '@/components/StandardTable'; - -import { MyIcon } from "@/components/Icon" -import style from "@/global.less"; -import styles from './SystemOrganizationList.less'; -import datadictionary from "@/utils/dataDictionary"; -import {formatDate} from "@/utils/formatUtils"; -import { formatDictText, checkButtonAuthority } from "@/utils/globalCommon"; - -const { confirm } = Modal; - -// 组织类型 -const organization_type = datadictionary.organization_type || []; -const organization_status = datadictionary.organization_status || []; - -const mockData = { - list: [ - { - id: '1', - name: '总部', - code: 'HQ', - type: '1', - parentId: '0', - status: '1', - createTime: '2023-01-01 10:00:00', - createUser: 'admin' - }, - { - id: '2', - name: '研发部', - code: 'R&D', - type: '2', - parentId: '1', - status: '1', - createTime: '2023-01-02 14:30:00', - createUser: 'admin' - }, - { - id: '3', - name: '市场部', - code: 'MKT', - type: '2', - parentId: '1', - status: '1', - createTime: '2023-01-03 09:15:00', - createUser: 'admin' - } - ], - pagination: { - total: 3, - pageSize: 10, - current: 1 - } -}; - -@connect(({ systemOrganization, loading }) => ({ - systemOrganization, - loading: loading.models.systemOrganization -})) -export default class SystemOrganizationList extends React.Component { - state = { - selectedRows: [], - loading: false, - advancedFormVisible: false, - filterData: {}, - pagination: { - pageSize: 10, - current: 1 - }, - tableData: mockData.list - }; - - componentDidMount() { - this.getOrganizationList(); - } - - // 获取组织列表 - getOrganizationList = () => { - const { dispatch } = this.props; - const { pagination, filterData } = this.state; - this.setState({ loading: true }); - dispatch({ - type: 'systemOrganization/fetchList', - payload: { - pageNum: pagination.current, - pageSize: pagination.pageSize, - ...filterData - }, - callback: (res) => { - this.setState({ - loading: false, - tableData: res?.list || [], - pagination: { - ...pagination, - total: res?.total || 0 - } - }); - } - }); - }; - - // 表格选择变化 - handleSelectChange = (selectedRowKeys, selectedRows) => { - this.setState({ selectedRows }); - }; - - // 分页变化 - handleTableChange = (pagination) => { - this.setState({ - pagination: { - ...this.state.pagination, - current: pagination.current - } - }, () => { - this.getOrganizationList(); - }); - }; - - // 新增组织 - handleAdd = () => { - // 新增逻辑 - message.success('新增组织功能'); - }; - - // 编辑组织 - handleEdit = (record) => { - // 编辑逻辑 - message.success('编辑组织功能'); - }; - - // 删除组织 - handleDelete = (record) => { - confirm({ - title: '确定要删除这个组织吗?', - icon: , - onOk: () => { - // 删除逻辑 - message.success('删除组织成功'); - } - }); - }; - - // 批量删除 - handleBatchDelete = () => { - const { selectedRows } = this.state; - if (selectedRows.length === 0) { - message.warning('请选择要删除的组织'); - return; - } - confirm({ - title: `确定要删除选中的${selectedRows.length}个组织吗?`, - icon: , - onOk: () => { - // 批量删除逻辑 - message.success('批量删除组织成功'); - } - }); - }; - - // 启用/禁用组织 - handleStatusChange = (record) => { - const newStatus = record.status === '1' ? '0' : '1'; - confirm({ - title: `确定要${newStatus === '1' ? '启用' : '禁用'}这个组织吗?`, - icon: , - onOk: () => { - // 状态变更逻辑 - message.success(`${newStatus === '1' ? '启用' : '禁用'}组织成功`); - } - }); - }; - - render() { - const { selectedRows, loading, tableData, pagination } = this.state; - - const columns = [ - { - title: '组织名称', - dataIndex: 'name', - key: 'name', - ellipsis: true - }, - { - title: '组织编码', - dataIndex: 'code', - key: 'code', - ellipsis: true - }, - { - title: '组织类型', - dataIndex: 'type', - key: 'type', - render: text => formatDictText(organization_type, text) - }, - { - title: '状态', - dataIndex: 'status', - key: 'status', - render: text => ( - - {text === '1' ? '启用' : '禁用'} - - ) - }, - { - title: '创建时间', - dataIndex: 'createTime', - key: 'createTime', - ellipsis: true - }, - { - title: '创建人', - dataIndex: 'createUser', - key: 'createUser', - ellipsis: true - }, - { - title: '操作', - key: 'action', - fixed: 'right', - width: 160, - render: (_, record) => ( - - - - this.handleStatusChange(record)} - /> - - ) - } - ]; - - return ( -
- -
-
-

组织管理

-
-
- - -
-
- - - - - -
- ); - } -} \ No newline at end of file diff --git a/src/pages/systemOrganization/SystemOrganizationList.less b/src/pages/systemOrganization/SystemOrganizationList.less deleted file mode 100644 index 9b7b87b..0000000 --- a/src/pages/systemOrganization/SystemOrganizationList.less +++ /dev/null @@ -1,80 +0,0 @@ -.header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 16px; -} - -.headerLeft { - display: flex; - align-items: center; -} - -.headerRight { - display: flex; - align-items: center; -} - -.title { - margin: 0; - font-size: 18px; - font-weight: 500; - color: rgba(0, 0, 0, 0.85); -} - -.filterSection { - margin-bottom: 16px; -} - -.filterRow { - display: flex; - align-items: center; - margin-bottom: 12px; -} - -.filterItem { - margin-right: 16px; -} - -.actionButtons { - display: flex; - align-items: center; -} - -.batchAction { - margin-right: 12px; -} - -.formContainer { - padding: 24px; - background-color: #f5f5f5; -} - -.formHeader { - margin-bottom: 16px; - padding-bottom: 8px; - border-bottom: 1px solid #e8e8e8; -} - -.formTitle { - margin: 0; - font-size: 16px; - font-weight: 500; - color: rgba(0, 0, 0, 0.85); -} - -.formContent { - background-color: #fff; - padding: 24px; - border-radius: 2px; -} - -.formFooter { - display: flex; - justify-content: flex-end; - margin-top: 24px; -} - -.formButton { - margin-left: 12px; -} \ No newline at end of file diff --git a/src/pages/systemRole/SystemRoleList.js b/src/pages/systemRole/SystemRoleList.js deleted file mode 100644 index 54c0bc8..0000000 --- a/src/pages/systemRole/SystemRoleList.js +++ /dev/null @@ -1,329 +0,0 @@ -import React from 'react'; -import { - DeleteOutlined, - EditOutlined, - PlusOutlined, - SearchOutlined, - RedoOutlined, - DownOutlined, - ExclamationCircleFilled, - UpOutlined, - InfoCircleFilled, - QuestionCircleFilled, - DownloadOutlined -} from '@ant-design/icons'; -import {connect, history} from '@umijs/max'; -import {Button, Card, Divider, Dropdown, message, Modal, Popconfirm, Space, Switch, Tag, Row, Col} from 'antd'; -import StandardTable from '@/components/StandardTable'; - -import { MyIcon } from "@/components/Icon" -import style from "@/global.less"; -import styles from './SystemRoleList.less'; -import datadictionary from "@/utils/dataDictionary"; -import {formatDate} from "@/utils/formatUtils"; -import { formatDictText, checkButtonAuthority } from "@/utils/globalCommon"; - -const { confirm } = Modal; - -// 角色类型 -const role_type = datadictionary.role_type || []; -const role_status = datadictionary.role_status || []; - -const mockData = { - list: [ - { - id: '1', - name: '超级管理员', - code: 'SUPER_ADMIN', - type: '1', - status: '1', - createTime: '2023-01-01 10:00:00', - createUser: 'admin', - remark: '系统最高权限角色' - }, - { - id: '2', - name: '部门管理员', - code: 'DEPT_ADMIN', - type: '2', - status: '1', - createTime: '2023-01-02 14:30:00', - createUser: 'admin', - remark: '部门级管理权限' - }, - { - id: '3', - name: '普通用户', - code: 'NORMAL_USER', - type: '3', - status: '1', - createTime: '2023-01-03 09:15:00', - createUser: 'admin', - remark: '基础功能访问权限' - } - ], - pagination: { - total: 3, - pageSize: 10, - current: 1 - } -}; - -@connect(({ systemRole, loading }) => ({ - systemRole, - loading: loading.models.systemRole -})) -export default class SystemRoleList extends React.Component { - state = { - selectedRows: [], - loading: false, - advancedFormVisible: false, - filterData: {}, - pagination: { - pageSize: 10, - current: 1 - }, - tableData: mockData.list - }; - - componentDidMount() { - this.getRoleList(); - } - - // 获取角色列表 - getRoleList = () => { - const { dispatch } = this.props; - const { pagination, filterData } = this.state; - this.setState({ loading: true }); - dispatch({ - type: 'systemRole/fetchList', - payload: { - pageNum: pagination.current, - pageSize: pagination.pageSize, - ...filterData - }, - callback: (res) => { - this.setState({ - loading: false, - tableData: res?.list || [], - pagination: { - ...pagination, - total: res?.total || 0 - } - }); - } - }); - }; - - // 表格选择变化 - handleSelectChange = (selectedRowKeys, selectedRows) => { - this.setState({ selectedRows }); - }; - - // 分页变化 - handleTableChange = (pagination) => { - this.setState({ - pagination: { - ...this.state.pagination, - current: pagination.current - } - }, () => { - this.getRoleList(); - }); - }; - - // 新增角色 - handleAdd = () => { - // 新增逻辑 - message.success('新增角色功能'); - }; - - // 编辑角色 - handleEdit = (record) => { - // 编辑逻辑 - message.success('编辑角色功能'); - }; - - // 角色授权 - handleAuth = (record) => { - // 授权逻辑 - message.success('角色授权功能'); - }; - - // 删除角色 - handleDelete = (record) => { - confirm({ - title: '确定要删除这个角色吗?', - icon: , - onOk: () => { - // 删除逻辑 - message.success('删除角色成功'); - } - }); - }; - - // 批量删除 - handleBatchDelete = () => { - const { selectedRows } = this.state; - if (selectedRows.length === 0) { - message.warning('请选择要删除的角色'); - return; - } - confirm({ - title: `确定要删除选中的${selectedRows.length}个角色吗?`, - icon: , - onOk: () => { - // 批量删除逻辑 - message.success('批量删除角色成功'); - } - }); - }; - - // 启用/禁用角色 - handleStatusChange = (record) => { - const newStatus = record.status === '1' ? '0' : '1'; - confirm({ - title: `确定要${newStatus === '1' ? '启用' : '禁用'}这个角色吗?`, - icon: , - onOk: () => { - // 状态变更逻辑 - message.success(`${newStatus === '1' ? '启用' : '禁用'}角色成功`); - } - }); - }; - - render() { - const { selectedRows, loading, tableData, pagination } = this.state; - - const columns = [ - { - title: '角色名称', - dataIndex: 'name', - key: 'name', - ellipsis: true - }, - { - title: '角色编码', - dataIndex: 'code', - key: 'code', - ellipsis: true - }, - { - title: '角色类型', - dataIndex: 'type', - key: 'type', - render: text => formatDictText(role_type, text) - }, - { - title: '状态', - dataIndex: 'status', - key: 'status', - render: text => ( - - {text === '1' ? '启用' : '禁用'} - - ) - }, - { - title: '创建时间', - dataIndex: 'createTime', - key: 'createTime', - ellipsis: true - }, - { - title: '创建人', - dataIndex: 'createUser', - key: 'createUser', - ellipsis: true - }, - { - title: '备注', - dataIndex: 'remark', - key: 'remark', - ellipsis: true - }, - { - title: '操作', - key: 'action', - fixed: 'right', - width: 200, - render: (_, record) => ( - - - - - this.handleStatusChange(record)} - /> - - ) - } - ]; - - return ( -
- -
-
-

角色配置

-
-
- - -
-
- - - - - -
- ); - } -} \ No newline at end of file diff --git a/src/pages/systemRole/SystemRoleList.less b/src/pages/systemRole/SystemRoleList.less deleted file mode 100644 index 9b7b87b..0000000 --- a/src/pages/systemRole/SystemRoleList.less +++ /dev/null @@ -1,80 +0,0 @@ -.header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 16px; -} - -.headerLeft { - display: flex; - align-items: center; -} - -.headerRight { - display: flex; - align-items: center; -} - -.title { - margin: 0; - font-size: 18px; - font-weight: 500; - color: rgba(0, 0, 0, 0.85); -} - -.filterSection { - margin-bottom: 16px; -} - -.filterRow { - display: flex; - align-items: center; - margin-bottom: 12px; -} - -.filterItem { - margin-right: 16px; -} - -.actionButtons { - display: flex; - align-items: center; -} - -.batchAction { - margin-right: 12px; -} - -.formContainer { - padding: 24px; - background-color: #f5f5f5; -} - -.formHeader { - margin-bottom: 16px; - padding-bottom: 8px; - border-bottom: 1px solid #e8e8e8; -} - -.formTitle { - margin: 0; - font-size: 16px; - font-weight: 500; - color: rgba(0, 0, 0, 0.85); -} - -.formContent { - background-color: #fff; - padding: 24px; - border-radius: 2px; -} - -.formFooter { - display: flex; - justify-content: flex-end; - margin-top: 24px; -} - -.formButton { - margin-left: 12px; -} \ No newline at end of file