报表分析-报表设置
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