diff --git a/src/pages/business_emergencyResource/components/secondary_menu/czjy.js b/src/pages/business_emergencyResource/components/secondary_menu/czjy.js index 7fae224..d57a27e 100644 --- a/src/pages/business_emergencyResource/components/secondary_menu/czjy.js +++ b/src/pages/business_emergencyResource/components/secondary_menu/czjy.js @@ -1,6 +1,6 @@ -import React, { useState } from 'react'; -import { Input, Button, Select, message } from 'antd'; -import { SearchOutlined, PlusOutlined } from '@ant-design/icons'; +import React, { useState, useEffect } from 'react'; +import { Input, Button, Select, message, Modal } from 'antd'; +import { SearchOutlined, PlusOutlined, DeleteOutlined, EditOutlined } from '@ant-design/icons'; import StandardTable from '@/components/StandardTable'; import styles from './czjy.less'; @@ -11,18 +11,97 @@ const { Option } = Select; const Czjy = () => { const [loading, setLoading] = useState(false); const [selectedRowKeys, setSelectedRowKeys] = useState([]); - const [searchValue, setSearchValue] = useState(''); + const [searchValue, setSearchValue] = useState(undefined); const [pagination, setPagination] = useState({ current: 1, pageSize: 10, - total: 0, + total: 48, showSizeChanger: true, showQuickJumper: true, showTotal: (total, range) => `共${total}条`, }); - // 数据源 - const [dataSource, setDataSource] = useState([]); + // 模拟数据 + const [dataSource, setDataSource] = useState([ + { + key: '1', + number: '01', + fireName: '消防点一', + waterPointName: '消防池 01', + hydrantCount: 97, + hydrantLocation: '一楼走廊', + range: 97, + waterType: '企业消防水池', + personInCharge: '冯钰涛', + fireImage: '点击查看图片', + remarks: '无', + }, + { + key: '2', + number: '02', + fireName: '消防点二', + waterPointName: '消防池 02', + hydrantCount: 96, + hydrantLocation: '二楼走廊', + range: 96, + waterType: '企业消防水池', + personInCharge: '周静', + fireImage: '点击查看图片', + remarks: '备注二二', + }, + { + key: '3', + number: '03', + fireName: '消防点三', + waterPointName: '消防池 03', + hydrantCount: 91, + hydrantLocation: '三楼图书馆门口', + range: 91, + waterType: '企业消防水池', + personInCharge: '何能', + fireImage: '点击查看图片', + remarks: '备注三三', + }, + { + key: '4', + number: '04', + fireName: '消防点四', + waterPointName: '消防池 04', + hydrantCount: 59, + hydrantLocation: '三楼应急通道口', + range: 59, + waterType: '企业消防水池', + personInCharge: '冯新', + fireImage: '点击查看图片', + remarks: '备注四四', + }, + { + key: '5', + number: '05', + fireName: '消防点五', + waterPointName: '消防池 05', + hydrantCount: 50, + hydrantLocation: '负一层东侧走廊', + range: 50, + waterType: '企业消防水池', + personInCharge: '赵俊英', + fireImage: '点击查看图片', + remarks: '备注五五', + }, + { + key: '6', + number: '06', + fireName: '消防点六', + waterPointName: '消防池 06', + hydrantCount: 48, + hydrantLocation: '四楼c西侧走廊', + range: 48, + waterType: '企业消防水池', + personInCharge: '赵中琏', + fireImage: '点击查看图片', + remarks: '备注六六', + }, + ]); // 表格列配置 const columns = [ @@ -32,6 +111,69 @@ const Czjy = () => { key: 'number', width: 80, }, + { + title: '消防点名称', + dataIndex: 'fireName', + key: 'fireName', + width: 120, + }, + { + title: '消防取水点名称', + dataIndex: 'waterPointName', + key: 'waterPointName', + width: 140, + }, + { + title: '消防栓数量', + dataIndex: 'hydrantCount', + key: 'hydrantCount', + width: 110, + }, + { + title: '消防栓位置', + dataIndex: 'hydrantLocation', + key: 'hydrantLocation', + width: 150, + }, + { + title: '射程', + dataIndex: 'range', + key: 'range', + width: 80, + }, + { + title: '消防栓用水类型', + dataIndex: 'waterType', + key: 'waterType', + width: 140, + }, + { + title: '负责人', + dataIndex: 'personInCharge', + key: 'personInCharge', + width: 100, + }, + { + title: '消防点图片', + dataIndex: 'fireImage', + key: 'fireImage', + width: 120, + render: (text) => ( + + ), + }, + { + title: '备注', + dataIndex: 'remarks', + key: 'remarks', + width: 100, + }, { title: '操作', key: 'action', @@ -41,6 +183,7 @@ const Czjy = () => { - + */} @@ -167,4 +338,3 @@ const Czjy = () => { }; export default Czjy; - diff --git a/src/pages/business_emergencyResource/components/secondary_menu/czjy.less b/src/pages/business_emergencyResource/components/secondary_menu/czjy.less index 589b8d7..cc48572 100644 --- a/src/pages/business_emergencyResource/components/secondary_menu/czjy.less +++ b/src/pages/business_emergencyResource/components/secondary_menu/czjy.less @@ -1,4 +1,4 @@ -.container { +.containerCZYJ { padding: 20px; background: #fff; height:100vh; @@ -46,6 +46,33 @@ } } +// 自定义 Select 样式 +.customSelect { + :global { + .ant-select-selector { + height: 30px !important; + border-radius: 2px !important; + display: flex !important; + align-items: center !important; + } + + .ant-select-selection-search-input { + height: 30px !important; + } + + .ant-select-selection-item, + .ant-select-selection-placeholder { + line-height: 30px !important; + } + } +} + +// 自定义 Input 样式 +.customInput { + height: 30px !important; + border-radius: 2px !important; +} + // 自定义按钮样式 .customButton { background-color: #2E4CD4 !important; @@ -136,4 +163,3 @@ } } } - diff --git a/src/pages/business_emergencyResource/components/secondary_menu/jjjl.js b/src/pages/business_emergencyResource/components/secondary_menu/jjjl.js index 0478a80..d02c23a 100644 --- a/src/pages/business_emergencyResource/components/secondary_menu/jjjl.js +++ b/src/pages/business_emergencyResource/components/secondary_menu/jjjl.js @@ -1,6 +1,6 @@ -import React, { useState } from 'react'; -import { Input, Button, Select, message } from 'antd'; -import { SearchOutlined, PlusOutlined } from '@ant-design/icons'; +import React, { useState, useEffect } from 'react'; +import { Input, Button, Select, message, Modal } from 'antd'; +import { SearchOutlined, PlusOutlined, DeleteOutlined, EditOutlined } from '@ant-design/icons'; import StandardTable from '@/components/StandardTable'; import styles from './jjjl.less'; @@ -11,18 +11,97 @@ const { Option } = Select; const Jjjl = () => { const [loading, setLoading] = useState(false); const [selectedRowKeys, setSelectedRowKeys] = useState([]); - const [searchValue, setSearchValue] = useState(''); + const [searchValue, setSearchValue] = useState(undefined); const [pagination, setPagination] = useState({ current: 1, pageSize: 10, - total: 0, + total: 48, showSizeChanger: true, showQuickJumper: true, showTotal: (total, range) => `共${total}条`, }); - // 数据源 - const [dataSource, setDataSource] = useState([]); + // 模拟数据 + const [dataSource, setDataSource] = useState([ + { + key: '1', + number: '01', + fireName: '消防点一', + waterPointName: '消防池 01', + hydrantCount: 97, + hydrantLocation: '一楼走廊', + range: 97, + waterType: '企业消防水池', + personInCharge: '冯钰涛', + fireImage: '点击查看图片', + remarks: '无', + }, + { + key: '2', + number: '02', + fireName: '消防点二', + waterPointName: '消防池 02', + hydrantCount: 96, + hydrantLocation: '二楼走廊', + range: 96, + waterType: '企业消防水池', + personInCharge: '周静', + fireImage: '点击查看图片', + remarks: '备注二二', + }, + { + key: '3', + number: '03', + fireName: '消防点三', + waterPointName: '消防池 03', + hydrantCount: 91, + hydrantLocation: '三楼图书馆门口', + range: 91, + waterType: '企业消防水池', + personInCharge: '何能', + fireImage: '点击查看图片', + remarks: '备注三三', + }, + { + key: '4', + number: '04', + fireName: '消防点四', + waterPointName: '消防池 04', + hydrantCount: 59, + hydrantLocation: '三楼应急通道口', + range: 59, + waterType: '企业消防水池', + personInCharge: '冯新', + fireImage: '点击查看图片', + remarks: '备注四四', + }, + { + key: '5', + number: '05', + fireName: '消防点五', + waterPointName: '消防池 05', + hydrantCount: 50, + hydrantLocation: '负一层东侧走廊', + range: 50, + waterType: '企业消防水池', + personInCharge: '赵俊英', + fireImage: '点击查看图片', + remarks: '备注五五', + }, + { + key: '6', + number: '06', + fireName: '消防点六', + waterPointName: '消防池 06', + hydrantCount: 48, + hydrantLocation: '四楼c西侧走廊', + range: 48, + waterType: '企业消防水池', + personInCharge: '赵中琏', + fireImage: '点击查看图片', + remarks: '备注六六', + }, + ]); // 表格列配置 const columns = [ @@ -32,6 +111,69 @@ const Jjjl = () => { key: 'number', width: 80, }, + { + title: '消防点名称', + dataIndex: 'fireName', + key: 'fireName', + width: 120, + }, + { + title: '消防取水点名称', + dataIndex: 'waterPointName', + key: 'waterPointName', + width: 140, + }, + { + title: '消防栓数量', + dataIndex: 'hydrantCount', + key: 'hydrantCount', + width: 110, + }, + { + title: '消防栓位置', + dataIndex: 'hydrantLocation', + key: 'hydrantLocation', + width: 150, + }, + { + title: '射程', + dataIndex: 'range', + key: 'range', + width: 80, + }, + { + title: '消防栓用水类型', + dataIndex: 'waterType', + key: 'waterType', + width: 140, + }, + { + title: '负责人', + dataIndex: 'personInCharge', + key: 'personInCharge', + width: 100, + }, + { + title: '消防点图片', + dataIndex: 'fireImage', + key: 'fireImage', + width: 120, + render: (text) => ( + + ), + }, + { + title: '备注', + dataIndex: 'remarks', + key: 'remarks', + width: 100, + }, { title: '操作', key: 'action', @@ -41,6 +183,7 @@ const Jjjl = () => { - + */} @@ -167,4 +338,3 @@ const Jjjl = () => { }; export default Jjjl; - diff --git a/src/pages/business_emergencyResource/components/secondary_menu/jjjl.less b/src/pages/business_emergencyResource/components/secondary_menu/jjjl.less index 589b8d7..7b348f6 100644 --- a/src/pages/business_emergencyResource/components/secondary_menu/jjjl.less +++ b/src/pages/business_emergencyResource/components/secondary_menu/jjjl.less @@ -1,4 +1,4 @@ -.container { +.containerJJJL { padding: 20px; background: #fff; height:100vh; @@ -46,6 +46,33 @@ } } +// 自定义 Select 样式 +.customSelect { + :global { + .ant-select-selector { + height: 30px !important; + border-radius: 2px !important; + display: flex !important; + align-items: center !important; + } + + .ant-select-selection-search-input { + height: 30px !important; + } + + .ant-select-selection-item, + .ant-select-selection-placeholder { + line-height: 30px !important; + } + } +} + +// 自定义 Input 样式 +.customInput { + height: 30px !important; + border-radius: 2px !important; +} + // 自定义按钮样式 .customButton { background-color: #2E4CD4 !important; @@ -136,4 +163,3 @@ } } } -