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

日期框样式

Browse Source
main
wangyunfei 13 hours ago
parent ce3291c5ed
commit 9b6d548c89
4 changed files with 434 additions and 42 deletions
Show Stats Download Patch File Download Diff File

208
src/pages/business_emergencyResource/components/secondary_menu/czjy.js
Unescape Escape View File

@ -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) => (
<Button
type="link"
size="small"
onClick={() => message.info('查看图片功能待实现')}
>
{text}
</Button>
),
},
{
title: '备注',
dataIndex: 'remarks',
key: 'remarks',
width: 100,
},
{
title: '操作',
key: 'action',
@ -41,6 +183,7 @@ const Czjy = () => {
<Button
type="link"
size="small"
// icon={<EditOutlined />}
onClick={() => handleEdit(record)}
>
修改
@ -49,6 +192,7 @@ const Czjy = () => {
type="link"
size="small"
danger
// icon={<DeleteOutlined />}
onClick={() => handleDelete(record)}
>
删除
@ -61,6 +205,7 @@ const Czjy = () => {
// 搜索处理
const handleSearch = () => {
setLoading(true);
// 模拟搜索请求
setTimeout(() => {
setLoading(false);
message.success('查询完成');
@ -69,7 +214,7 @@ const Czjy = () => {
// 新增处理
const handleAdd = () => {
message.info('新增功能待开发');
message.info('新增功能待实现');
};
// 批量删除处理
@ -78,17 +223,32 @@ const Czjy = () => {
message.warning('请选择要删除的数据');
return;
}
message.info('删除功能待开发');
Modal.confirm({
title: '确认删除',
content: `确定要删除选中的 ${selectedRowKeys.length} 条数据吗？`,
onOk() {
setDataSource(dataSource.filter(item => !selectedRowKeys.includes(item.key)));
setSelectedRowKeys([]);
message.success('删除成功');
},
});
};
// 编辑处理
const handleEdit = (record) => {
message.info('编辑功能待开发');
message.info(`编辑 ${record.fireName} 的信息`);
};
// 删除处理
const handleDelete = (record) => {
message.info('删除功能待开发');
Modal.confirm({
title: '确认删除',
content: `确定要删除 ${record.fireName} 吗？`,
onOk() {
setDataSource(dataSource.filter(item => item.key !== record.key));
message.success('删除成功');
},
});
};
// 分页处理
@ -97,7 +257,7 @@ const Czjy = () => {
};
return (
<div className={styles.container}>
<div className={styles.containerCZYJ}>
{/* 页面标题 */}
<div className={styles.header}>
<div className={styles.titleBar}></div>
@ -108,15 +268,26 @@ const Czjy = () => {
<div className={styles.searchBar}>
<div className={styles.searchLeft}>
<Select
placeholder="请选择"
placeholder="请选择消防点"
value={searchValue}
onChange={setSearchValue}
style={{width: 180, height: 30, borderRadius: 2}}
style={{width: 180}}
className={styles.customSelect}
allowClear
>
<Option value="选项1">选项1</Option>
<Option value="选项2">选项2</Option>
<Option value="消防点一">消防点一</Option>
<Option value="消防点二">消防点二</Option>
<Option value="消防点三">消防点三</Option>
<Option value="消防点四">消防点四</Option>
<Option value="消防点五">消防点五</Option>
<Option value="消防点六">消防点六</Option>
</Select>
<Input
placeholder="请输入消防点名称"
style={{width: 180}}
className={styles.customInput}
allowClear
/>
<Button
type="primary"
icon={<SearchOutlined />}
@ -136,14 +307,14 @@ const Czjy = () => {
>
新增
</Button>
<Button
{/* <Button
danger
style={{width: 70, height: 30, borderRadius: 2, display: 'flex', alignItems: 'center', justifyContent: 'center'}}
icon={<img src={iconsc} alt="delete" style={{width: 14, height: 14, marginTop: -2}}/>}
onClick={handleBatchDelete}
>
删除
</Button>
</Button> */}
</div>
</div>
@ -167,4 +338,3 @@ const Czjy = () => {
};
export default Czjy;

30
src/pages/business_emergencyResource/components/secondary_menu/czjy.less
Unescape Escape View File

@ -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 @@
}
}
}

208
src/pages/business_emergencyResource/components/secondary_menu/jjjl.js
Unescape Escape View File

@ -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) => (
<Button
type="link"
size="small"
onClick={() => message.info('查看图片功能待实现')}
>
{text}
</Button>
),
},
{
title: '备注',
dataIndex: 'remarks',
key: 'remarks',
width: 100,
},
{
title: '操作',
key: 'action',
@ -41,6 +183,7 @@ const Jjjl = () => {
<Button
type="link"
size="small"
// icon={<EditOutlined />}
onClick={() => handleEdit(record)}
>
修改
@ -49,6 +192,7 @@ const Jjjl = () => {
type="link"
size="small"
danger
// icon={<DeleteOutlined />}
onClick={() => handleDelete(record)}
>
删除
@ -61,6 +205,7 @@ const Jjjl = () => {
// 搜索处理
const handleSearch = () => {
setLoading(true);
// 模拟搜索请求
setTimeout(() => {
setLoading(false);
message.success('查询完成');
@ -69,7 +214,7 @@ const Jjjl = () => {
// 新增处理
const handleAdd = () => {
message.info('新增功能待开发');
message.info('新增功能待实现');
};
// 批量删除处理
@ -78,17 +223,32 @@ const Jjjl = () => {
message.warning('请选择要删除的数据');
return;
}
message.info('删除功能待开发');
Modal.confirm({
title: '确认删除',
content: `确定要删除选中的 ${selectedRowKeys.length} 条数据吗？`,
onOk() {
setDataSource(dataSource.filter(item => !selectedRowKeys.includes(item.key)));
setSelectedRowKeys([]);
message.success('删除成功');
},
});
};
// 编辑处理
const handleEdit = (record) => {
message.info('编辑功能待开发');
message.info(`编辑 ${record.fireName} 的信息`);
};
// 删除处理
const handleDelete = (record) => {
message.info('删除功能待开发');
Modal.confirm({
title: '确认删除',
content: `确定要删除 ${record.fireName} 吗？`,
onOk() {
setDataSource(dataSource.filter(item => item.key !== record.key));
message.success('删除成功');
},
});
};
// 分页处理
@ -97,7 +257,7 @@ const Jjjl = () => {
};
return (
<div className={styles.container}>
<div className={styles.containerJJJL}>
{/* 页面标题 */}
<div className={styles.header}>
<div className={styles.titleBar}></div>
@ -108,15 +268,26 @@ const Jjjl = () => {
<div className={styles.searchBar}>
<div className={styles.searchLeft}>
<Select
placeholder="请选择"
placeholder="请选择消防点"
value={searchValue}
onChange={setSearchValue}
style={{width: 180, height: 30, borderRadius: 2}}
style={{width: 180}}
className={styles.customSelect}
allowClear
>
<Option value="选项1">选项1</Option>
<Option value="选项2">选项2</Option>
<Option value="消防点一">消防点一</Option>
<Option value="消防点二">消防点二</Option>
<Option value="消防点三">消防点三</Option>
<Option value="消防点四">消防点四</Option>
<Option value="消防点五">消防点五</Option>
<Option value="消防点六">消防点六</Option>
</Select>
<Input
placeholder="请输入消防点名称"
style={{width: 180}}
className={styles.customInput}
allowClear
/>
<Button
type="primary"
icon={<SearchOutlined />}
@ -136,14 +307,14 @@ const Jjjl = () => {
>
新增
</Button>
<Button
{/* <Button
danger
style={{width: 70, height: 30, borderRadius: 2, display: 'flex', alignItems: 'center', justifyContent: 'center'}}
icon={<img src={iconsc} alt="delete" style={{width: 14, height: 14, marginTop: -2}}/>}
onClick={handleBatchDelete}
>
删除
</Button>
</Button> */}
</div>
</div>
@ -167,4 +338,3 @@ const Jjjl = () => {
};
export default Jjjl;

30
src/pages/business_emergencyResource/components/secondary_menu/jjjl.less
Unescape Escape View File

@ -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 @@
}
}
}

Write Preview
Loading…
Cancel
Save