提交 449ef2db authored 作者: 王鹏飞's avatar 王鹏飞

chore: update

上级 d2e4e5c7
......@@ -5,11 +5,15 @@ import { useCreateChart } from '@/hooks/useChartQuery'
import { useAI } from '@/hooks/useAI'
import { Column } from '@ant-design/plots'
export default function ButtonModal({ title = '新建柱状图', type = '1' }) {
interface Props {
type: string
setOpen: (open: boolean) => void
}
const ModalContent = ({ setOpen, type }: Props) => {
const { data } = useDataQuery()
const { fieldOptions } = useDataFieldQuery()
const [open, setOpen] = useState(false)
const [form] = Form.useForm()
const [results, setResults] = useState({})
......@@ -63,134 +67,134 @@ export default function ButtonModal({ title = '新建柱状图', type = '1' }) {
})
})
}
return (
<>
<Form
form={form}
preserve={false}
initialValues={{
hidden_axis_x: '隐藏',
hidden_axis_y: '隐藏',
fill_color: '自动颜色',
radius: '不做圆滑处理',
legend: '隐藏',
has_title: '无',
fill_image: '纯色',
}}>
<Form.Item label="组件名称" name="name">
<Input placeholder="请输入" />
</Form.Item>
<Divider orientation="left" orientationMargin="0">
步骤1:数字字段设置
</Divider>
<Row gutter={20}>
<Col span={8}>
<Form.Item label="请选择“度量”字段" name="y">
<Select options={fieldOptions} placeholder="请选择"></Select>
</Form.Item>
</Col>
<Col span={8}>
<Form.Item label="计算规则" name="y_rule">
<Select options={[{ label: '无计算', value: '无计算' }]} placeholder="请选择"></Select>
</Form.Item>
</Col>
<Col span={8}>
<Form.Item label="排序规则" name="y_sort">
<Select options={[{ label: '无排序', value: '无排序' }]} placeholder="请选择"></Select>
</Form.Item>
</Col>
</Row>
<Row gutter={20}>
<Col span={8}>
<Form.Item label="请选择“维度”字段" name="x">
<Select options={fieldOptions} placeholder="请选择"></Select>
</Form.Item>
</Col>
</Row>
<Row gutter={20}>
<Col span={8}>
<Form.Item label="是否隐藏行轴" name="hidden_axis_x">
<Radio.Group options={hiddenOptions}></Radio.Group>
</Form.Item>
</Col>
<Col span={8}>
<Form.Item label="是否隐藏列轴" name="hidden_axis_y">
<Radio.Group options={hiddenOptions}></Radio.Group>
</Form.Item>
</Col>
</Row>
<Divider orientation="left" orientationMargin="0">
步骤2:辅助可视化设置
</Divider>
<Row gutter={20}>
<Col span={12}>
<Form.Item label="请选择“标签”字段" name="label">
<Select options={fieldOptions} placeholder="请选择"></Select>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label="请选择颜色规则" name="fill_color">
<Radio.Group options={['自动颜色', '不同柱子颜色不同']}></Radio.Group>
</Form.Item>
</Col>
</Row>
<Row gutter={20}>
<Col span={12}>
<Flex>
<Form.Item label="是否有标题" name="has_title">
<Radio.Group options={['无', '有']}></Radio.Group>
</Form.Item>
<Form.Item name="title">
<Input placeholder="请输入" />
</Form.Item>
</Flex>
</Col>
<Col span={12}>
<Form.Item label="请选择填充图案" name="fill_image">
<Radio.Group options={['纯色', '斜线', '横线', '竖线']}></Radio.Group>
</Form.Item>
</Col>
</Row>
<Row gutter={20}>
<Col span={12}>
<Form.Item label="是否隐藏图例" name="legend">
<Radio.Group options={hiddenOptions}></Radio.Group>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label="是否四个角圆滑" name="radius">
<Radio.Group options={['不做圆滑处理', '四个角圆滑处理', '两个角圆滑处理']}></Radio.Group>
</Form.Item>
</Col>
</Row>
<Divider orientation="left" orientationMargin="0">
步骤3:预览组件效果
</Divider>
{!!Object.keys(results).length && <Column {...config} />}
</Form>
<Flex justify="center" gap={20}>
<Button type="primary" onClick={handlePreview}>
预览组件效果
</Button>
<Button type="primary">AI对话调整</Button>
<Button type="primary" autoInsertSpace onClick={handleSubmit}>
保存
</Button>
</Flex>
</>
)
}
export default function ButtonModal({ title = '新建柱状图', type = '1' }) {
const [open, setOpen] = useState(false)
return (
<>
<Button type="primary" onClick={() => setOpen(true)}>
{title}
</Button>
<Modal
title={title}
open={open}
footer={
<Flex justify="center" gap={20}>
<Button type="primary" onClick={handlePreview}>
预览组件效果
</Button>
<Button type="primary">AI对话调整</Button>
<Button type="primary" autoInsertSpace onClick={handleSubmit}>
保存
</Button>
</Flex>
}
destroyOnClose
width={1000}
onCancel={() => setOpen(false)}>
<div style={{ minHeight: 300, padding: '20px 0' }}>
<Form
form={form}
preserve={false}
initialValues={{
hidden_axis_x: '隐藏',
hidden_axis_y: '隐藏',
fill_color: '自动颜色',
radius: '不做圆滑处理',
legend: '隐藏',
has_title: '无',
fill_image: '纯色',
}}>
<Form.Item label="组件名称" name="name">
<Input placeholder="请输入" />
</Form.Item>
<Divider orientation="left" orientationMargin="0">
步骤1:数字字段设置
</Divider>
<Row gutter={20}>
<Col span={8}>
<Form.Item label="请选择“度量”字段" name="y">
<Select options={fieldOptions} placeholder="请选择"></Select>
</Form.Item>
</Col>
<Col span={8}>
<Form.Item label="计算规则" name="y_rule">
<Select options={[{ label: '无计算', value: '无计算' }]} placeholder="请选择"></Select>
</Form.Item>
</Col>
<Col span={8}>
<Form.Item label="排序规则" name="y_sort">
<Select options={[{ label: '无排序', value: '无排序' }]} placeholder="请选择"></Select>
</Form.Item>
</Col>
</Row>
<Row gutter={20}>
<Col span={8}>
<Form.Item label="请选择“维度”字段" name="x">
<Select options={fieldOptions} placeholder="请选择"></Select>
</Form.Item>
</Col>
</Row>
<Row gutter={20}>
<Col span={8}>
<Form.Item label="是否隐藏行轴" name="hidden_axis_x">
<Radio.Group options={hiddenOptions}></Radio.Group>
</Form.Item>
</Col>
<Col span={8}>
<Form.Item label="是否隐藏列轴" name="hidden_axis_y">
<Radio.Group options={hiddenOptions}></Radio.Group>
</Form.Item>
</Col>
</Row>
<Divider orientation="left" orientationMargin="0">
步骤2:辅助可视化设置
</Divider>
<Row gutter={20}>
<Col span={12}>
<Form.Item label="请选择“标签”字段" name="label">
<Select options={fieldOptions} placeholder="请选择"></Select>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label="请选择颜色规则" name="fill_color">
<Radio.Group options={['自动颜色', '不同柱子颜色不同']}></Radio.Group>
</Form.Item>
</Col>
</Row>
<Row gutter={20}>
<Col span={12}>
<Flex>
<Form.Item label="是否有标题" name="has_title">
<Radio.Group options={['无', '有']}></Radio.Group>
</Form.Item>
<Form.Item name="title">
<Input placeholder="请输入" />
</Form.Item>
</Flex>
</Col>
<Col span={12}>
<Form.Item label="请选择填充图案" name="fill_image">
<Radio.Group options={['纯色', '斜线', '横线', '竖线']}></Radio.Group>
</Form.Item>
</Col>
</Row>
<Row gutter={20}>
<Col span={12}>
<Form.Item label="是否隐藏图例" name="legend">
<Radio.Group options={hiddenOptions}></Radio.Group>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label="是否四个角圆滑" name="radius">
<Radio.Group options={['不做圆滑处理', '四个角圆滑处理', '两个角圆滑处理']}></Radio.Group>
</Form.Item>
</Col>
</Row>
<Divider orientation="left" orientationMargin="0">
步骤3:预览组件效果
</Divider>
{!!Object.keys(results).length && <Column {...config} />}
</Form>
</div>
<Modal title={title} open={open} footer={null} destroyOnClose width={1000} onCancel={() => setOpen(false)}>
<ModalContent type={type} setOpen={(open) => setOpen(open)} />
</Modal>
</>
)
......
import { useEffect, useState } from 'react'
import { useQuery } from '@tanstack/react-query'
import { useQuery, useQueryClient } from '@tanstack/react-query'
import { getUser, getMapList, getMyList, getMyField, getProcessProgress } from '@/api/base'
import { useUserStore } from '@/stores/user'
import { useMapStore } from '@/stores/map'
......@@ -111,7 +111,9 @@ export function useDataFieldQuery() {
// 进度查询
export function useProcessProgressQuery(params: { function_name: string }) {
const queryClient = useQueryClient()
const [enabled, setEnabled] = useState(false)
const query = useQuery({
queryKey: ['processProgress', params],
queryFn: () => {
......@@ -119,11 +121,18 @@ export function useProcessProgressQuery(params: { function_name: string }) {
},
select: (res) => res.data,
enabled,
refetchInterval: enabled ? 10000 : false,
refetchInterval: enabled ? 1000 : false,
staleTime: 0,
gcTime: 0,
placeholderData: (): any => {
return { data: { progress: -1, message: {} } }
},
})
const remove = () => {
queryClient.removeQueries({ queryKey: ['processProgress', params] })
}
// 开始轮询的方法
const start = () => {
setEnabled(true)
......@@ -133,7 +142,6 @@ export function useProcessProgressQuery(params: { function_name: string }) {
const stop = () => {
setEnabled(false)
}
console.log(query.data)
// 组件卸载时清理
useEffect(() => {
if (query.data?.result === 'SUCCESS' || query.data?.result === 'FAIL' || query.data?.result === null) {
......@@ -142,7 +150,7 @@ export function useProcessProgressQuery(params: { function_name: string }) {
return () => {
stop()
}
}, [query.data])
}, [query.data, enabled])
return { ...query, start, stop }
return { ...query, start, stop, remove }
}
......@@ -65,14 +65,12 @@ export default function ButtonModal() {
const rule = Form.useWatch('rule', form)
const rules = Form.useWatch('rules', form) || {}
const { mutate, isPending, progress, message } = useProcessData()
const { mutate, isPending, progress, message, remove } = useProcessData()
// 开始处理
const handleStart = () => {
form.validateFields().then((values) => {
const params = { ...values, fields: values.fields.join(','), rules: JSON.stringify(values.rules) }
mutate(params, {
onSuccess: handleClose,
})
mutate(params)
})
}
......@@ -80,7 +78,7 @@ export default function ButtonModal() {
const handleClose = () => {
setOpen(false)
setCurrent(0)
form.resetFields()
remove()
}
const steps = [
......
......@@ -7,7 +7,7 @@ import { useProcessProgressQuery } from '@/hooks/useQuery'
// 处理数据
export function useProcessData() {
const queryClient = useQueryClient()
const { data, start } = useProcessProgressQuery({ function_name: 'missing' })
const { data, start, remove } = useProcessProgressQuery({ function_name: 'missing' })
const query = useMutation({
mutationFn: (data: ProcessDataParams) => {
......@@ -19,5 +19,6 @@ export function useProcessData() {
queryClient.invalidateQueries({ queryKey: ['data'] })
},
})
return { ...query, progress: data?.progress ?? -1, message: data?.message ?? {} }
return { ...query, progress: data.progress, message: data.message, remove }
}
......@@ -220,7 +220,6 @@ export default function ButtonModal() {
setCurrent(0)
setStep(-1)
setConcatenatedFields([])
form.resetFields()
}
return (
......
......@@ -31,7 +31,7 @@ export default function ButtonModal() {
setCurrent(current + 1)
}
const { mutate, isPending, progress, message } = useProcessData()
const { mutate, isPending, progress, message, remove } = useProcessData()
// 开始处理
const handleStart = () => {
......@@ -46,8 +46,8 @@ export default function ButtonModal() {
const handleClose = () => {
setOpen(false)
setCurrent(0)
remove()
}
const [groupName, setGroupName] = useState('')
// 步骤定义
......
......@@ -7,7 +7,7 @@ import { useProcessProgressQuery } from '@/hooks/useQuery'
// 处理数据
export function useProcessData() {
const queryClient = useQueryClient()
const { data, start } = useProcessProgressQuery({ function_name: 'mapping' })
const { data, start, remove } = useProcessProgressQuery({ function_name: 'mapping' })
const query = useMutation({
mutationFn: (data: ProcessDataParams) => {
......@@ -19,5 +19,5 @@ export function useProcessData() {
queryClient.invalidateQueries({ queryKey: ['data'] })
},
})
return { ...query, progress: data?.progress ?? -1, message: data?.message ?? {} }
return { ...query, progress: data.progress, message: data.message, remove }
}
......@@ -103,7 +103,7 @@ export default function ButtonModal() {
setCurrent(current + 1)
}
const { mutate, isPending, progress, message } = useProcessData()
const { mutate, isPending, progress, message, remove } = useProcessData()
// 开始处理
const handleStart = () => {
......@@ -126,8 +126,8 @@ export default function ButtonModal() {
const handleClose = () => {
setOpen(false)
setCurrent(0)
remove()
}
const handleFunctionChange = (value: string) => {
form.setFieldsValue({ content: `${value}()` })
}
......
......@@ -7,7 +7,7 @@ import { useProcessProgressQuery } from '@/hooks/useQuery'
// 处理数据
export function useProcessData() {
const queryClient = useQueryClient()
const { data, start } = useProcessProgressQuery({ function_name: 'date' })
const { data, start, remove } = useProcessProgressQuery({ function_name: 'date' })
const query = useMutation({
mutationFn: (data: ProcessDataParams) => {
......@@ -19,5 +19,5 @@ export function useProcessData() {
queryClient.invalidateQueries({ queryKey: ['data'] })
},
})
return { ...query, progress: data?.progress ?? -1, message: data?.message ?? {} }
return { ...query, progress: data.progress, message: data.message, remove }
}
......@@ -27,7 +27,7 @@ export default function ButtonModal() {
setCurrent(current + 1)
}
const { mutate, isPending, progress, message } = useProcessData()
const { mutate, isPending, progress, message, remove } = useProcessData()
// 开始处理
const handleStart = () => {
......@@ -42,8 +42,8 @@ export default function ButtonModal() {
const handleClose = () => {
setOpen(false)
setCurrent(0)
remove()
}
// 步骤定义
const steps = [
{
......
......@@ -7,7 +7,7 @@ import { useProcessProgressQuery } from '@/hooks/useQuery'
// 处理数据
export function useProcessData() {
const queryClient = useQueryClient()
const { data, start } = useProcessProgressQuery({ function_name: 'anonymization' })
const { data, start, remove } = useProcessProgressQuery({ function_name: 'anonymization' })
const query = useMutation({
mutationFn: (data: ProcessDataParams) => {
......@@ -19,5 +19,5 @@ export function useProcessData() {
queryClient.invalidateQueries({ queryKey: ['data'] })
},
})
return { ...query, progress: data?.progress ?? -1, message: data?.message ?? {} }
return { ...query, progress: data.progress, message: data.message, remove }
}
......@@ -44,7 +44,7 @@ export default function ButtonModal() {
setCurrent(current + 1)
}
const { mutate, isPending, progress, message } = useProcessData()
const { mutate, isPending, progress, message, remove } = useProcessData()
// 开始处理
const handleStart = () => {
......@@ -69,8 +69,8 @@ export default function ButtonModal() {
const handleClose = () => {
setOpen(false)
setCurrent(0)
remove()
}
const [groupName, setGroupName] = useState('')
// 步骤定义
const steps = [
......
......@@ -7,7 +7,7 @@ import { useProcessProgressQuery } from '@/hooks/useQuery'
// 处理数据
export function useProcessData() {
const queryClient = useQueryClient()
const { data, start } = useProcessProgressQuery({ function_name: 'grouping' })
const { data, start, remove } = useProcessProgressQuery({ function_name: 'grouping' })
const query = useMutation({
mutationFn: (data: ProcessDataParams) => {
......@@ -19,5 +19,5 @@ export function useProcessData() {
queryClient.invalidateQueries({ queryKey: ['data'] })
},
})
return { ...query, progress: data?.progress ?? -1, message: data?.message ?? {} }
return { ...query, progress: data.progress, message: data.message, remove }
}
......@@ -43,7 +43,7 @@ export default function ButtonModal() {
setCurrent(current + 1)
}
const { mutate, isPending, progress, message } = useProcessData()
const { mutate, isPending, progress, message, remove } = useProcessData()
// 开始处理
const handleStart = () => {
......@@ -63,8 +63,8 @@ export default function ButtonModal() {
const handleClose = () => {
setOpen(false)
setCurrent(0)
remove()
}
const handleFunctionChange = (value: string) => {
form.setFieldsValue({ content: `${value}()` })
}
......
......@@ -7,7 +7,7 @@ import { useProcessProgressQuery } from '@/hooks/useQuery'
// 处理数据
export function useProcessData() {
const queryClient = useQueryClient()
const { data, start } = useProcessProgressQuery({ function_name: 'logic' })
const { data, start, remove } = useProcessProgressQuery({ function_name: 'logic' })
const query = useMutation({
mutationFn: (data: ProcessDataParams) => {
......@@ -19,5 +19,5 @@ export function useProcessData() {
queryClient.invalidateQueries({ queryKey: ['data'] })
},
})
return { ...query, progress: data?.progress ?? -1, message: data?.message ?? {} }
return { ...query, progress: data.progress, message: data.message, remove }
}
......@@ -45,7 +45,7 @@ export default function ButtonModal() {
setCurrent(current + 1)
}
const { mutate, isPending, progress, message } = useProcessData()
const { mutate, isPending, progress, message, remove } = useProcessData()
// 开始处理
const handleStart = () => {
......@@ -63,8 +63,8 @@ export default function ButtonModal() {
const handleClose = () => {
setOpen(false)
setCurrent(0)
remove()
}
// 步骤定义
const steps = [
{
......
......@@ -7,7 +7,7 @@ import { useProcessProgressQuery } from '@/hooks/useQuery'
// 处理数据
export function useProcessData() {
const queryClient = useQueryClient()
const { data, start } = useProcessProgressQuery({ function_name: 'mapping' })
const { data, start, remove } = useProcessProgressQuery({ function_name: 'mapping' })
const query = useMutation({
mutationFn: (data: ProcessDataParams) => {
......@@ -19,5 +19,5 @@ export function useProcessData() {
queryClient.invalidateQueries({ queryKey: ['data'] })
},
})
return { ...query, progress: data?.progress ?? -1, message: data?.message ?? {} }
return { ...query, progress: data.progress, message: data.message, remove }
}
......@@ -43,7 +43,7 @@ export default function ButtonModal() {
setCurrent(current + 1)
}
const { mutate, isPending, progress, message } = useProcessData()
const { mutate, isPending, progress, message, remove } = useProcessData()
// 开始处理
const handleStart = () => {
......@@ -63,8 +63,8 @@ export default function ButtonModal() {
const handleClose = () => {
setOpen(false)
setCurrent(0)
remove()
}
const handleFunctionChange = (value: string) => {
form.setFieldsValue({ content: `${value}()` })
}
......
......@@ -7,7 +7,7 @@ import { useProcessProgressQuery } from '@/hooks/useQuery'
// 处理数据
export function useProcessData() {
const queryClient = useQueryClient()
const { data, start } = useProcessProgressQuery({ function_name: 'numeric' })
const { data, start, remove } = useProcessProgressQuery({ function_name: 'numeric' })
const query = useMutation({
mutationFn: (data: ProcessDataParams) => {
......@@ -19,5 +19,5 @@ export function useProcessData() {
queryClient.invalidateQueries({ queryKey: ['data'] })
},
})
return { ...query, progress: data?.progress ?? -1, message: data?.message ?? {} }
return { ...query, progress: data.progress, message: data.message, remove }
}
......@@ -44,7 +44,7 @@ export default function ButtonModal() {
setCurrent(current + 1)
}
const { mutate, isPending, progress, message } = useProcessData()
const { mutate, isPending, progress, message, remove } = useProcessData()
// 开始处理
const handleStart = () => {
......@@ -64,6 +64,7 @@ export default function ButtonModal() {
const handleClose = () => {
setOpen(false)
setCurrent(0)
remove()
}
const handleFunctionChange = (value: string) => {
......
......@@ -7,7 +7,7 @@ import { useProcessProgressQuery } from '@/hooks/useQuery'
// 处理数据
export function useProcessData() {
const queryClient = useQueryClient()
const { data, start } = useProcessProgressQuery({ function_name: 'text' })
const { data, start, remove } = useProcessProgressQuery({ function_name: 'text' })
const query = useMutation({
mutationFn: (data: ProcessDataParams) => {
......@@ -19,5 +19,5 @@ export function useProcessData() {
queryClient.invalidateQueries({ queryKey: ['data'] })
},
})
return { ...query, progress: data?.progress ?? -1, message: data?.message ?? {} }
return { ...query, progress: data.progress, message: data.message, remove }
}
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论