提交 0012a77d authored 作者: 王鹏飞's avatar 王鹏飞

chore: update

上级 4e4e165d
import { useState } from 'react'
import { Button, Modal } from 'antd'
export default function AppButtonModal({
open = false,
buttonText = 'Open Modal',
onOk,
onCancel,
children,
...props
}: any) {
const [isModalOpen, setIsModalOpen] = useState(open)
const showModal = () => {
setIsModalOpen(true)
}
const handleOk = async () => {
if (onOk) onOk()
setIsModalOpen(false)
}
const handleCancel = async () => {
if (onCancel) onCancel()
setIsModalOpen(false)
}
return (
<>
<Button type="primary" onClick={showModal}>
{buttonText}
</Button>
<Modal open={isModalOpen} onOk={handleOk} onCancel={handleCancel} {...props}>
{children}
</Modal>
</>
)
}
import type { StepsProps } from 'antd'
import { Popover, Steps } from 'antd'
export default function AppSteps(props: StepsProps) {
const customDot: StepsProps['progressDot'] = (dot, { status, index }) => <>{dot}</>
return <Steps {...props} progressDot={customDot} />
}
import { useState } from 'react'
import { Button, Checkbox, Flex, Modal, Steps, Radio, Select, Input, Form } from 'antd'
import { useDataFieldQuery } from '@/hooks/useQuery'
export default function ButtonModal() {
const { data } = useDataFieldQuery()
const [open, setOpen] = useState(false)
const [current, setCurrent] = useState(0)
const [checkedList, setCheckedList] = useState<string[]>([])
const [processingMethod, setProcessingMethod] = useState<'unified' | 'individual'>('unified')
const [processingRule, setProcessingRule] = useState<string>('不处理')
const [specialValue, setSpecialValue] = useState<string>('')
const plainOptions = data?.map((item) => {
return {
label: item.name,
value: item.name,
}
})
const onChange = (list: string[]) => {
setCheckedList(list)
}
const next = () => {
setCurrent(current + 1)
}
const prev = () => {
setCurrent(current - 1)
}
const [form] = Form.useForm()
const methodOptions = [
{ label: '统一规则处理', value: 'unified' },
{ label: '逐个配置规则处理', value: 'individual' },
]
const ruleOptions = [
{ label: '不处理', value: '不处理' },
{ label: 'AI智能填充', value: 'AI智能填充' },
{ label: '删除', value: '删除' },
{ label: '平均值填充', value: '平均值填充' },
{ label: '特殊值填充', value: '特殊值填充' },
{ label: '热卡填充(上)', value: '热卡填充(上)' },
{ label: '热卡填充(下)', value: '热卡填充(下)' },
]
const steps = [
{
title: '请选择缺失值字段',
content: <Checkbox.Group options={plainOptions} value={checkedList} onChange={onChange} />,
},
{
title: '配置处理规则',
content: (
<Form form={form} labelCol={{ span: 5 }} preserve={false}>
<Form.Item label="缺失值处理字段">是否会员、会员等级</Form.Item>
<Form.Item label="缺失值字段处理方法">
<Radio.Group
onChange={(e) => setProcessingMethod(e.target.value)}
value={processingMethod}
options={methodOptions}></Radio.Group>
</Form.Item>
<Form.Item label="缺失值字段处理规则">
<Select
style={{ width: 200 }}
value={processingRule}
onChange={(value) => setProcessingRule(value)}
options={ruleOptions}
/>
</Form.Item>
<Form.Item label="请填写特殊值">
<Input
style={{ width: 200 }}
value={specialValue}
onChange={(e) => setSpecialValue(e.target.value)}
placeholder="请输入"
/>
</Form.Item>
</Form>
),
},
{
title: '处理执行',
content: (
<>
<p>缺失值处理字段:XXXXX, XXXX, XXXX, XXXX, XXXX, XXXX</p>
<Flex vertical align="center" style={{ marginTop: '20px' }}>
<Button type="primary">开始处理</Button>
<Steps
labelPlacement="vertical"
items={[
{
title: '检查字段处理规则',
},
{
title: '缺失值处理',
},
{
title: '处理结果',
},
]}></Steps>
</Flex>
</>
),
},
]
const title = steps[current].title
return (
<>
<Button type="primary" onClick={() => setOpen(true)}>
处理缺失值
</Button>
<Modal
title={title}
open={open}
footer={
<Flex justify="center" gap={20}>
{current === 0 && <Button type="primary">检查缺失值字段</Button>}
{current > 0 && <Button onClick={() => prev()}>上一步</Button>}
{current < steps.length - 1 && (
<Button type="primary" onClick={() => next()}>
下一步
</Button>
)}
{current === steps.length - 1 && (
<Button type="primary" onClick={() => setOpen(false)}>
关闭
</Button>
)}
</Flex>
}
destroyOnClose
width={800}
onCancel={() => setOpen(false)}>
<div style={{ minHeight: 300, padding: '20px 0' }}>
<div style={{ marginTop: '20px' }}>{steps[current].content}</div>
</div>
</Modal>
</>
)
}
import { lazy } from 'react'
import DataWrap from '@/components/data/DataWrap'
import { Button } from 'antd'
const ButtonModal = lazy(() => import('../components/ButtonModal'))
export default function DataProcess() {
return (
<DataWrap
title="数据预处理:缺失值处理"
buttons={
<>
<Button type="primary">处理缺失值</Button>
</>
}></DataWrap>
)
return <DataWrap title="数据预处理:缺失值处理" buttons={<ButtonModal />}></DataWrap>
}
import { useState } from 'react'
import { Button, Checkbox, Flex, Modal, Steps, Radio, Select, Input, Form } from 'antd'
import { useDataFieldQuery } from '@/hooks/useQuery'
export default function ButtonModal() {
const { data } = useDataFieldQuery()
const [open, setOpen] = useState(false)
const [current, setCurrent] = useState(0)
const [checkedList, setCheckedList] = useState<string[]>([])
const [processingMethod, setProcessingMethod] = useState<'unified' | 'individual'>('unified')
const [processingRule, setProcessingRule] = useState<string>('不处理')
const [specialValue, setSpecialValue] = useState<string>('')
const plainOptions = data?.map((item) => {
return {
label: item.name,
value: item.name,
}
})
const onChange = (list: string[]) => {
setCheckedList(list)
}
const next = () => {
setCurrent(current + 1)
}
const prev = () => {
setCurrent(current - 1)
}
const [form] = Form.useForm()
const methodOptions = [
{ label: '统一规则处理', value: 'unified' },
{ label: '逐个配置规则处理', value: 'individual' },
]
const ruleOptions = [
{ label: '不处理', value: '不处理' },
{ label: 'AI智能填充', value: 'AI智能填充' },
{ label: '删除', value: '删除' },
{ label: '平均值填充', value: '平均值填充' },
{ label: '特殊值填充', value: '特殊值填充' },
{ label: '热卡填充(上)', value: '热卡填充(上)' },
{ label: '热卡填充(下)', value: '热卡填充(下)' },
]
const steps = [
{
title: '请选择重复值数据',
content: <Checkbox.Group options={plainOptions} value={checkedList} onChange={onChange} />,
},
{
title: '配置处理规则',
content: (
<Form form={form} labelCol={{ span: 5 }} preserve={false}>
<Form.Item label="重复值处理字段">是否会员、会员等级</Form.Item>
<Form.Item label="重复值字段处理方法">
<Radio.Group
onChange={(e) => setProcessingMethod(e.target.value)}
value={processingMethod}
options={methodOptions}></Radio.Group>
</Form.Item>
<Form.Item label="重复值字段处理规则">
<Select
style={{ width: 200 }}
value={processingRule}
onChange={(value) => setProcessingRule(value)}
options={ruleOptions}
/>
</Form.Item>
<Form.Item label="请填写特殊值">
<Input
style={{ width: 200 }}
value={specialValue}
onChange={(e) => setSpecialValue(e.target.value)}
placeholder="请输入"
/>
</Form.Item>
</Form>
),
},
{
title: '处理执行',
content: (
<>
<p>重复值处理字段:XXXXX, XXXX, XXXX, XXXX, XXXX, XXXX</p>
<Flex vertical align="center" style={{ marginTop: '20px' }}>
<Button type="primary">开始处理</Button>
<Steps
labelPlacement="vertical"
items={[
{
title: '检查字段处理规则',
},
{
title: '重复值处理',
},
{
title: '处理结果',
},
]}></Steps>
</Flex>
</>
),
},
]
const title = steps[current].title
return (
<>
<Button type="primary" onClick={() => setOpen(true)}>
处理重复值
</Button>
<Modal
title={title}
open={open}
footer={
<Flex justify="center" gap={20}>
{current === 0 && <Button type="primary">检查重复值字段</Button>}
{current > 0 && <Button onClick={() => prev()}>上一步</Button>}
{current < steps.length - 1 && (
<Button type="primary" onClick={() => next()}>
下一步
</Button>
)}
{current === steps.length - 1 && (
<Button type="primary" onClick={() => setOpen(false)}>
关闭
</Button>
)}
</Flex>
}
destroyOnClose
width={800}
onCancel={() => setOpen(false)}>
<div style={{ minHeight: 300, padding: '20px 0' }}>
<div style={{ marginTop: '20px' }}>{steps[current].content}</div>
</div>
</Modal>
</>
)
}
import { lazy } from 'react'
import DataWrap from '@/components/data/DataWrap'
import { Button } from 'antd'
const ButtonModal = lazy(() => import('../components/ButtonModal'))
export default function DataProcess() {
return (
<DataWrap
title="数据预处理:重复值处理"
buttons={
<>
<Button type="primary">处理重复值</Button>
</>
}></DataWrap>
)
return <DataWrap title="数据预处理:重复值处理" buttons={<ButtonModal />}></DataWrap>
}
......@@ -49,11 +49,7 @@ export default function ButtonModal() {
<Flex justify="center" gap={20}>
{current === 0 && <Button type="primary">智能探索字段数据逻辑错误</Button>}
{current > 0 && (
<Button style={{ margin: '0 8px' }} onClick={() => prev()}>
上一步
</Button>
)}
{current > 0 && <Button onClick={() => prev()}>上一步</Button>}
{current < steps.length - 1 && (
<Button type="primary" onClick={() => next()}>
下一步
......
......@@ -49,11 +49,7 @@ export default function ButtonModal() {
<Flex justify="center" gap={20}>
{current === 0 && <Button type="primary">智能探索过大值字段</Button>}
{current > 0 && (
<Button style={{ margin: '0 8px' }} onClick={() => prev()}>
上一步
</Button>
)}
{current > 0 && <Button onClick={() => prev()}>上一步</Button>}
{current < steps.length - 1 && (
<Button type="primary" onClick={() => next()}>
下一步
......
......@@ -49,11 +49,7 @@ export default function ButtonModal() {
<Flex justify="center" gap={20}>
{current === 0 && <Button type="primary">智能探索过小值字段</Button>}
{current > 0 && (
<Button style={{ margin: '0 8px' }} onClick={() => prev()}>
上一步
</Button>
)}
{current > 0 && <Button onClick={() => prev()}>上一步</Button>}
{current < steps.length - 1 && (
<Button type="primary" onClick={() => next()}>
下一步
......
......@@ -99,11 +99,7 @@ export default function ButtonModal() {
</Button>
)}
{current > 0 && (
<Button style={{ margin: '0 8px' }} onClick={() => prev()}>
上一步
</Button>
)}
{current > 0 && <Button onClick={() => prev()}>上一步</Button>}
{current > 0 && current < steps.length - 1 && (
<Button type="primary" onClick={() => next()}>
下一步
......
......@@ -36,11 +36,7 @@ export default function ButtonModal() {
<Flex justify="center" gap={20}>
{current === 0 && <Button type="primary">智能探索重复值字段</Button>}
{current > 0 && (
<Button style={{ margin: '0 8px' }} onClick={() => prev()}>
上一步
</Button>
)}
{current > 0 && <Button onClick={() => prev()}>上一步</Button>}
{current < steps.length - 1 && (
<Button type="primary" onClick={() => next()}>
下一步
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论