报表分析-报表设置
zjlnb666
2 weeks ago
parent
9c0012b3cd
commit
2da3e23700
@ -0,0 +1,354 @@
|
||||
import Title from '../homepage/compontent/title'
|
||||
import {Button, Col, Form, Input, Row, Select, Switch, Tabs, DatePicker, Divider} from "antd";
|
||||
import {PlusOutlined} from "@ant-design/icons";
|
||||
import styles from './Set.less'
|
||||
|
||||
const Item=()=>{
|
||||
// 时间粒度选项
|
||||
const timeGranularityOptions = [
|
||||
{ label: '按小时', value: 'hour' },
|
||||
{ label: '按天', value: 'day' },
|
||||
{ label: '按周', value: 'week' },
|
||||
{ label: '按月', value: 'month' },
|
||||
];
|
||||
|
||||
// 时间范围选项
|
||||
const timeRangeOptions = [
|
||||
{ label: '最近7天', value: 'last7days' },
|
||||
{ label: '最近30天', value: 'last30days' },
|
||||
{ label: '最近90天', value: 'last90days' },
|
||||
{ label: '自定义', value: 'custom' },
|
||||
];
|
||||
// 表单提交处理
|
||||
const onFinish = (values) => {
|
||||
console.log('表单提交:', values);
|
||||
};
|
||||
return (
|
||||
<div style={{padding: '20px 0'}}>
|
||||
{/* 添加表单 */}
|
||||
<Form
|
||||
layout="vertical"
|
||||
onFinish={onFinish}
|
||||
style={{maxWidth: '100%'}}
|
||||
className={styles.form}
|
||||
>
|
||||
<Row gutter={[32, 0]}>
|
||||
{/* 时间粒度选择 */}
|
||||
<Col span={6}>
|
||||
<Form.Item
|
||||
name="timeGranularity"
|
||||
label="时间粒度选择："
|
||||
rules={[{required: true, message: '请选择时间粒度'}]}
|
||||
style={{marginBottom: 0}}
|
||||
layout={'vertical'}
|
||||
>
|
||||
<Select
|
||||
options={timeGranularityOptions}
|
||||
placeholder="请选择时间粒度"
|
||||
style={{width: '100%'}}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
|
||||
{/* 时间范围选择 */}
|
||||
<Col span={6}>
|
||||
<Form.Item
|
||||
name="timeRange"
|
||||
label="时间范围选择："
|
||||
rules={[{required: true, message: '请选择时间范围'}]}
|
||||
style={{marginBottom: 0}}
|
||||
layout="vertical"
|
||||
>
|
||||
<Select
|
||||
options={timeRangeOptions}
|
||||
placeholder="请选择时间范围"
|
||||
style={{width: '100%'}}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
|
||||
{/* 时间范围自定义 */}
|
||||
<Col span={6}>
|
||||
<Form.Item
|
||||
layout="vertical"
|
||||
name="customTimeRange"
|
||||
label="时间范围自定义："
|
||||
style={{marginBottom: 0}}
|
||||
>
|
||||
<DatePicker.RangePicker
|
||||
style={{width: '100%'}}
|
||||
placeholder={['开始时间', '结束时间']}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Excel选项组件
|
||||
const ExcelOption=()=>{
|
||||
// 表单提交处理
|
||||
const onFinish = (values) => {
|
||||
console.log('Excel选项表单提交:', values);
|
||||
};
|
||||
|
||||
// 样式设置选项
|
||||
const fontOptions = [
|
||||
{ label: '宋体', value: 'simSun' },
|
||||
{ label: '微软雅黑', value: 'microsoftYaHei' },
|
||||
{ label: '黑体', value: 'heiTi' },
|
||||
{ label: 'Arial', value: 'arial' },
|
||||
{ label: 'Times New Roman', value: 'timesNewRoman' },
|
||||
];
|
||||
|
||||
const fontSizeOptions = [
|
||||
{ label: '10', value: '10' },
|
||||
{ label: '12', value: '12' },
|
||||
{ label: '14', value: '14' },
|
||||
{ label: '16', value: '16' },
|
||||
{ label: '18', value: '18' },
|
||||
{ label: '20', value: '20' },
|
||||
];
|
||||
|
||||
const colorOptions = [
|
||||
{ label: '红色', value: '#FF0000' },
|
||||
{ label: '蓝色', value: '#0000FF' },
|
||||
{ label: '绿色', value: '#00FF00' },
|
||||
{ label: '黄色', value: '#FFFF00' },
|
||||
{ label: '黑色', value: '#000000' },
|
||||
{ label: '白色', value: '#FFFFFF' },
|
||||
];
|
||||
|
||||
const borderStyleOptions = [
|
||||
{ label: '无', value: 'none' },
|
||||
{ label: '细线', value: 'thin' },
|
||||
{ label: '粗线', value: 'thick' },
|
||||
{ label: '虚线', value: 'dashed' },
|
||||
];
|
||||
|
||||
return (
|
||||
<div style={{padding: '20px 0'}}>
|
||||
<Form
|
||||
onFinish={onFinish}
|
||||
style={{maxWidth: '100%'}}
|
||||
className={styles.form}
|
||||
layout="vertical"
|
||||
>
|
||||
{/* 样式设置部分 */}
|
||||
<div style={{marginBottom: 20}}>
|
||||
<h3 style={{marginBottom: 10}}>样式设置</h3>
|
||||
<Row gutter={[16, 8]}>
|
||||
<Col span={6}>
|
||||
<Form.Item
|
||||
name="font"
|
||||
label="字体：" // 添加了冒号
|
||||
style={{marginBottom: 0}}
|
||||
layout="vertical"
|
||||
>
|
||||
<Select
|
||||
options={fontOptions}
|
||||
placeholder="请选择字体"
|
||||
style={{width: '100%'}}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<Form.Item
|
||||
name="fontSize"
|
||||
label="字号：" // 添加了冒号
|
||||
style={{marginBottom: 0}}
|
||||
layout="vertical"
|
||||
>
|
||||
<Select
|
||||
options={fontSizeOptions}
|
||||
placeholder="请选择字号"
|
||||
style={{width: '100%'}}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<Form.Item
|
||||
name="backgroundColor"
|
||||
label="单元格背景色：" // 添加了冒号
|
||||
style={{marginBottom: 0}}
|
||||
layout="vertical"
|
||||
>
|
||||
<Select
|
||||
options={colorOptions}
|
||||
placeholder="请选择背景色"
|
||||
style={{width: '100%'}}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<Form.Item
|
||||
name="fontColor"
|
||||
label="字体色：" // 添加了冒号
|
||||
style={{marginBottom: 0}}
|
||||
layout="vertical"
|
||||
>
|
||||
<Select
|
||||
options={colorOptions}
|
||||
placeholder="请选择字体色"
|
||||
style={{width: '100%'}}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<Form.Item
|
||||
name="columnWidth"
|
||||
label="列宽：" // 添加了冒号
|
||||
style={{marginBottom: 0}}
|
||||
layout="vertical"
|
||||
>
|
||||
<Input placeholder="请输入列宽" style={{width: '100%'}} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<Form.Item
|
||||
name="rowHeight"
|
||||
label="行高：" // 添加了冒号
|
||||
style={{marginBottom: 0}}
|
||||
layout="vertical"
|
||||
>
|
||||
<Input placeholder="请输入行高" style={{width: '100%'}} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
|
||||
{/* 布局设置部分 */}
|
||||
<div style={{marginBottom: 20}}>
|
||||
<h3 style={{marginBottom: 10}}>布局设置</h3>
|
||||
<Row gutter={[16, 8]}>
|
||||
<Col span={6}>
|
||||
<Form.Item
|
||||
name="headerStyle"
|
||||
label="表头样式：" // 添加了冒号
|
||||
style={{marginBottom: 0}}
|
||||
layout="vertical"
|
||||
>
|
||||
<Input placeholder="请输入表头样式" style={{width: '100%'}} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<Form.Item
|
||||
name="borderStyle"
|
||||
label="边框样式：" // 添加了冒号
|
||||
style={{marginBottom: 0}}
|
||||
layout="vertical"
|
||||
>
|
||||
<Select
|
||||
options={borderStyleOptions}
|
||||
placeholder="请选择边框样式"
|
||||
style={{width: '100%'}}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
|
||||
{/* 导出选项部分 */}
|
||||
<div style={{marginBottom: 20}}>
|
||||
<h3 style={{marginBottom: 10}}>导出选项</h3>
|
||||
<Row gutter={[16, 8]}>
|
||||
<Col span={3}>
|
||||
<Form.Item
|
||||
name="dataFilter"
|
||||
valuePropName="checked"
|
||||
label="数据筛选：" // 添加了冒号
|
||||
style={{marginBottom: 0}}
|
||||
layout="vertical"
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={3}>
|
||||
<Form.Item
|
||||
name="keepFormula"
|
||||
valuePropName="checked"
|
||||
label="公式保留：" // 添加了冒号
|
||||
style={{marginBottom: 0}}
|
||||
layout="vertical"
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
|
||||
{/* 按钮部分 */}
|
||||
<div style={{marginTop: 30}}>
|
||||
<Row justify="end">
|
||||
<Col>
|
||||
<Button className={styles["reset-button"]} style={{marginRight: 10}}>保存配置</Button>
|
||||
<Button className={styles["reset-button"]} style={{marginRight: 10}}>预览</Button>
|
||||
<Button className={styles["search-button"]} htmlType="submit">执行生成</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</Form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const Set = () => {
|
||||
const onChange = key => {
|
||||
console.log(key);
|
||||
};
|
||||
const items = [
|
||||
{
|
||||
key: '1',
|
||||
label: '时间维度',
|
||||
children: <Item/>,
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: '范围维度',
|
||||
children: <Item/>,
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
label: '类型维度',
|
||||
children: <Item/>,
|
||||
},
|
||||
];
|
||||
const items2 = [
|
||||
{
|
||||
key: '1',
|
||||
label: 'Excel格式配置',
|
||||
children: <ExcelOption/>,
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: 'Pdf格式配置',
|
||||
children: <Item/>,
|
||||
},
|
||||
];
|
||||
return (
|
||||
<div style={{padding: 20}}>
|
||||
<div>
|
||||
<Title title="报表维度配置"/>
|
||||
<Row justify={'space-between'}
|
||||
style={{padding: '20px 0', borderBottom: '1px solid #eeeeee', marginBottom: 30}}>
|
||||
<Col>
|
||||
<Button className={styles["search-button"]} style={{marginRight: 30}}>导入配置</Button>
|
||||
<Button className={styles["reset-button"]}>导出配置</Button>
|
||||
</Col>
|
||||
<Col>
|
||||
<Button className={styles["reset-button"]} style={{marginRight: 30}}>模板管理</Button>
|
||||
<Button icon={<PlusOutlined/>} className={styles["search-button"]}>建新报表</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
<Tabs defaultActiveKey="1" items={items} onChange={onChange}/>
|
||||
<Title title="格式自定义区"/>
|
||||
<Tabs defaultActiveKey="1" items={items2} onChange={onChange}/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Set;
|
||||
@ -0,0 +1,34 @@
|
||||
.search-button{
|
||||
background-image: url('../../assets/img/assetmangement1.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position:center;
|
||||
color: #fff;
|
||||
border-radius: 4px;
|
||||
height: 36px;
|
||||
border-color:#d9d9d9 ;
|
||||
}
|
||||
.reset-button{
|
||||
background-image: url('../../assets/img/assetmangement2.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position:center;
|
||||
color: rgba(0, 102, 101, 1);
|
||||
border-radius: 4px;
|
||||
height: 36px;
|
||||
border-color:#d9d9d9 ;
|
||||
}
|
||||
.del-button{
|
||||
background-image: url('../../assets/img/assetmangement3.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position:center;
|
||||
color: #000;
|
||||
border-radius: 4px;
|
||||
height: 36px;
|
||||
width:88px;
|
||||
border-color:#d9d9d9 ;
|
||||
background-color: #E5B7B733;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue