[fix]部署上线
This commit is contained in:
parent
db78250da2
commit
5381995c83
@ -1,10 +1,22 @@
|
||||
import { genChartByAiUsingPOST } from '@/services/answerbi/chartController';
|
||||
import { UploadOutlined } from '@ant-design/icons';
|
||||
import { Button, Card, Col, Divider, Form, Input, Row, Select, Space, Spin, Upload, message } from 'antd';
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
Col,
|
||||
Divider,
|
||||
Form,
|
||||
Input,
|
||||
message,
|
||||
Row,
|
||||
Select,
|
||||
Space,
|
||||
Spin,
|
||||
Upload,
|
||||
} from 'antd';
|
||||
import TextArea from 'antd/es/input/TextArea';
|
||||
import React, { useState } from 'react';
|
||||
import ReactECharts from 'echarts-for-react';
|
||||
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const AddChart: React.FC = () => {
|
||||
//定义状态，用来接收后端返回值，让它实时展示再页面上
|
||||
@ -12,9 +24,8 @@ const AddChart: React.FC = () => {
|
||||
const [option, setOption] = useState<any>();
|
||||
const [submitting, setSubmitting] = useState<boolean>(false);
|
||||
|
||||
|
||||
const onFinish = async (values: any) => {
|
||||
if(submitting) return;
|
||||
if (submitting) return;
|
||||
setSubmitting(true);
|
||||
setChart(undefined);
|
||||
setOption(undefined);
|
||||
@ -23,79 +34,81 @@ const AddChart: React.FC = () => {
|
||||
...values,
|
||||
file: undefined,
|
||||
};
|
||||
try{
|
||||
try {
|
||||
//需要取到上传的原始数据 file->file->originFileObj
|
||||
const res = await genChartByAiUsingPOST(params, {}, values.file.file.originFileObj);
|
||||
//正常情况下，如果没有返回值就分析失败，有就分析成功
|
||||
if(!res?.data){
|
||||
message.error(res.message ??'分析失败');
|
||||
}else{
|
||||
if (!res?.data) {
|
||||
message.error(res.message ?? '分析失败');
|
||||
} else {
|
||||
message.success('分析成功');
|
||||
//解析成对象
|
||||
console.log(res.data.genChart);
|
||||
const chartOption = JSON.parse(res.data.genChart ?? '');
|
||||
console.log(chartOption);
|
||||
if(!chartOption){
|
||||
throw new Error('图表代码解析错误')
|
||||
}else{
|
||||
if (!chartOption) {
|
||||
throw new Error('图表代码解析错误');
|
||||
} else {
|
||||
setChart(res.data);
|
||||
setOption(chartOption);
|
||||
}
|
||||
}
|
||||
}catch(e: any){
|
||||
} catch (e: any) {
|
||||
//异常情况下，提示分析失败+具体失败原因
|
||||
message.error('分析失败,' + e.message);
|
||||
}
|
||||
setSubmitting(false);
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<div className='add-chart'>
|
||||
<div className="add-chart">
|
||||
<Row gutter={24}>
|
||||
<Col span={12}>
|
||||
<Card title="智能分析">
|
||||
<Form
|
||||
name="addChart"
|
||||
labelAlign='left'
|
||||
labelCol={{span : 4}}
|
||||
wrapperCol={{span : 16}}
|
||||
labelAlign="left"
|
||||
labelCol={{ span: 4 }}
|
||||
wrapperCol={{ span: 16 }}
|
||||
onFinish={onFinish}
|
||||
initialValues={{ }}
|
||||
initialValues={{}}
|
||||
>
|
||||
<Form.Item
|
||||
<Form.Item
|
||||
name="goal"
|
||||
label="分析目标"
|
||||
rules={[{ required: true, message: '请输入分析目标!' }]}
|
||||
>
|
||||
<TextArea placeholder='请输入你的分析需求，比如：分析网站用户的增长情况'/>
|
||||
<TextArea placeholder="请输入你的分析需求，比如：分析网站用户的增长情况" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="chartName" label="图表名称">
|
||||
<Input placeholder='请输入图表名称'/>
|
||||
<Input placeholder="请输入图表名称" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="chartType" label="图表类型">
|
||||
<Select
|
||||
<Select
|
||||
placeholder="请选择图表类型"
|
||||
options={[
|
||||
{value: '折线图', label: '折线图'},
|
||||
{value: '柱状图', label: '柱状图'},
|
||||
{value: '堆叠图', label: '堆叠图'},
|
||||
{value: '饼图', label: '饼图'},
|
||||
{value: '雷达图', label: '雷达图'},
|
||||
{ value: '折线图', label: '折线图' },
|
||||
{ value: '柱状图', label: '柱状图' },
|
||||
{ value: '堆叠图', label: '堆叠图' },
|
||||
{ value: '饼图', label: '饼图' },
|
||||
{ value: '雷达图', label: '雷达图' },
|
||||
]}
|
||||
/>
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="file" label="上传原始数据">
|
||||
<Upload name="file">
|
||||
<Upload name="file" action="/uploadExcel">
|
||||
<Button icon={<UploadOutlined />}>上传EXCEL文件</Button>
|
||||
</Upload>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item wrapperCol={{ span: 12, offset: 6 }}>
|
||||
<Space>
|
||||
<Button type="primary" htmlType="submit">提交</Button>
|
||||
<Button type="primary" htmlType="submit">
|
||||
提交
|
||||
</Button>
|
||||
<Button htmlType="reset">重置</Button>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
@ -110,7 +123,7 @@ const AddChart: React.FC = () => {
|
||||
</Card>
|
||||
<Divider />
|
||||
<Card title="可视化图表">
|
||||
{option ? <ReactECharts option={option} /> : <div>请先在左侧提交！</div>}
|
||||
{option ? <ReactECharts option={option} /> : <div>请先在左侧提交！</div>}
|
||||
<Spin spinning={submitting} />
|
||||
</Card>
|
||||
</Col>
|
||||
|
||||
@ -1,88 +1,88 @@
|
||||
import { genChartByAiAsyncMqUsingPOST } from '@/services/answerbi/chartController';
|
||||
import { UploadOutlined } from '@ant-design/icons';
|
||||
import { Button, Card, Form, Input, Select, Space, Upload, message } from 'antd';
|
||||
import { Button, Card, Form, Input, message, Select, Space, Upload } from 'antd';
|
||||
import { useForm } from 'antd/es/form/Form';
|
||||
import TextArea from 'antd/es/input/TextArea';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
|
||||
const AddChartAsync: React.FC = () => {
|
||||
//定义状态，用来接收后端返回值，让它实时展示再页面上
|
||||
const [form] = useForm();
|
||||
const [submitting, setSubmitting] = useState<boolean>(false);
|
||||
|
||||
|
||||
const onFinish = async (values: any) => {
|
||||
if(submitting) return;
|
||||
if (submitting) return;
|
||||
setSubmitting(true);
|
||||
//对接后端，上传数据
|
||||
const params = {
|
||||
...values,
|
||||
file: undefined,
|
||||
};
|
||||
try{
|
||||
try {
|
||||
//需要取到上传的原始数据 file->file->originFileObj
|
||||
const res = await genChartByAiAsyncMqUsingPOST(params, {}, values.file.file.originFileObj);
|
||||
//正常情况下，如果没有返回值就分析失败，有就分析成功
|
||||
if(!res?.data){
|
||||
if (!res?.data) {
|
||||
message.error(res.message ?? '分析失败');
|
||||
}else{
|
||||
} else {
|
||||
message.success('分析任务提交成功，稍后请在我的图表页面查看');
|
||||
form.resetFields();
|
||||
}
|
||||
}catch(e: any){
|
||||
} catch (e: any) {
|
||||
//异常情况下，提示分析失败+具体失败原因
|
||||
message.error('分析失败,' + e.message);
|
||||
}
|
||||
setSubmitting(false);
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<div className='add-chart-async'>
|
||||
<div className="add-chart-async">
|
||||
<Card title="智能分析">
|
||||
<Form
|
||||
form={form}
|
||||
name="addChart"
|
||||
labelAlign='left'
|
||||
labelCol={{span : 4}}
|
||||
wrapperCol={{span : 16}}
|
||||
labelAlign="left"
|
||||
labelCol={{ span: 4 }}
|
||||
wrapperCol={{ span: 16 }}
|
||||
onFinish={onFinish}
|
||||
initialValues={{ }}
|
||||
initialValues={{}}
|
||||
>
|
||||
<Form.Item
|
||||
<Form.Item
|
||||
name="goal"
|
||||
label="分析目标"
|
||||
rules={[{ required: true, message: '请输入分析目标!' }]}
|
||||
>
|
||||
<TextArea placeholder='请输入你的分析需求，比如：分析网站用户的增长情况'/>
|
||||
<TextArea placeholder="请输入你的分析需求，比如：分析网站用户的增长情况" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="chartName" label="图表名称">
|
||||
<Input placeholder='请输入图表名称'/>
|
||||
<Input placeholder="请输入图表名称" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="chartType" label="图表类型">
|
||||
<Select
|
||||
<Select
|
||||
placeholder="请选择图表类型"
|
||||
options={[
|
||||
{value: '折线图', label: '折线图'},
|
||||
{value: '柱状图', label: '柱状图'},
|
||||
{value: '堆叠图', label: '堆叠图'},
|
||||
{value: '饼图', label: '饼图'},
|
||||
{value: '雷达图', label: '雷达图'},
|
||||
{ value: '折线图', label: '折线图' },
|
||||
{ value: '柱状图', label: '柱状图' },
|
||||
{ value: '堆叠图', label: '堆叠图' },
|
||||
{ value: '饼图', label: '饼图' },
|
||||
{ value: '雷达图', label: '雷达图' },
|
||||
]}
|
||||
/>
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="file" label="上传原始数据">
|
||||
<Upload name="file">
|
||||
<Upload name="file" action="/uploadExcel">
|
||||
<Button icon={<UploadOutlined />}>上传EXCEL文件</Button>
|
||||
</Upload>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item wrapperCol={{ span: 12, offset: 6 }}>
|
||||
<Space>
|
||||
<Button type="primary" htmlType="submit">提交</Button>
|
||||
<Button type="primary" htmlType="submit">
|
||||
提交
|
||||
</Button>
|
||||
<Button htmlType="reset">重置</Button>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user