yunpeng/answerBi-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[fix]部署上线

Browse Source
This commit is contained in:
yunpeng.zhang 2024-04-08 13:31:54 +08:00
parent db78250da2
commit 5381995c83
2 changed files with 71 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
src/pages/Chart/AddChart/index.tsx
View File

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

52
src/pages/Chart/AddChartAsync/index.tsx
View File

@ -1,88 +1,88 @@
import { genChartByAiAsyncMqUsingPOST } from '@/services/answerbi/chartController'; import { genChartByAiAsyncMqUsingPOST } from '@/services/answerbi/chartController';
import { UploadOutlined } from '@ant-design/icons'; 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 { useForm } from 'antd/es/form/Form';
import TextArea from 'antd/es/input/TextArea'; import TextArea from 'antd/es/input/TextArea';
import React, { useState } from 'react'; import React, { useState } from 'react';
const AddChartAsync: React.FC = () => { const AddChartAsync: React.FC = () => {
//定义状态，用来接收后端返回值，让它实时展示再页面上 //定义状态，用来接收后端返回值，让它实时展示再页面上
const [form] = useForm(); const [form] = useForm();
const [submitting, setSubmitting] = useState<boolean>(false); const [submitting, setSubmitting] = useState<boolean>(false);
const onFinish = async (values: any) => { const onFinish = async (values: any) => {
if(submitting) return; if (submitting) return;
setSubmitting(true); setSubmitting(true);
//对接后端，上传数据 //对接后端，上传数据
const params = { const params = {
...values, ...values,
file: undefined, file: undefined,
}; };
try{ try {
//需要取到上传的原始数据 file->file->originFileObj //需要取到上传的原始数据 file->file->originFileObj
const res = await genChartByAiAsyncMqUsingPOST(params, {}, values.file.file.originFileObj); const res = await genChartByAiAsyncMqUsingPOST(params, {}, values.file.file.originFileObj);
//正常情况下，如果没有返回值就分析失败，有就分析成功 //正常情况下，如果没有返回值就分析失败，有就分析成功
if(!res?.data){ if (!res?.data) {
message.error(res.message ?? '分析失败'); message.error(res.message ?? '分析失败');
}else{ } else {
message.success('分析任务提交成功，稍后请在我的图表页面查看'); message.success('分析任务提交成功，稍后请在我的图表页面查看');
form.resetFields(); form.resetFields();
} }
}catch(e: any){ } catch (e: any) {
//异常情况下，提示分析失败+具体失败原因 //异常情况下，提示分析失败+具体失败原因
message.error('分析失败,' + e.message); message.error('分析失败,' + e.message);
} }
setSubmitting(false); setSubmitting(false);
}; };
return ( return (
<div className='add-chart-async'> <div className="add-chart-async">
<Card title="智能分析"> <Card title="智能分析">
<Form <Form
form={form} form={form}
name="addChart" name="addChart"
labelAlign='left' labelAlign="left"
labelCol={{span : 4}} labelCol={{ span: 4 }}
wrapperCol={{span : 16}} wrapperCol={{ span: 16 }}
onFinish={onFinish} onFinish={onFinish}
initialValues={{ }} initialValues={{}}
> >
<Form.Item <Form.Item
name="goal" name="goal"
label="分析目标" label="分析目标"
rules={[{ required: true, message: '请输入分析目标!' }]} rules={[{ required: true, message: '请输入分析目标!' }]}
> >
<TextArea placeholder='请输入你的分析需求，比如：分析网站用户的增长情况'/> <TextArea placeholder="请输入你的分析需求，比如：分析网站用户的增长情况" />
</Form.Item> </Form.Item>
<Form.Item name="chartName" label="图表名称"> <Form.Item name="chartName" label="图表名称">
<Input placeholder='请输入图表名称'/> <Input placeholder="请输入图表名称" />
</Form.Item> </Form.Item>
<Form.Item name="chartType" label="图表类型"> <Form.Item name="chartType" label="图表类型">
<Select <Select
placeholder="请选择图表类型" placeholder="请选择图表类型"
options={[ 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>
<Form.Item name="file" label="上传原始数据"> <Form.Item name="file" label="上传原始数据">
<Upload name="file"> <Upload name="file" action="/uploadExcel">
<Button icon={<UploadOutlined />}>上传EXCEL文件</Button> <Button icon={<UploadOutlined />}>上传EXCEL文件</Button>
</Upload> </Upload>
</Form.Item> </Form.Item>
<Form.Item wrapperCol={{ span: 12, offset: 6 }}> <Form.Item wrapperCol={{ span: 12, offset: 6 }}>
<Space> <Space>
<Button type="primary" htmlType="submit">提交</Button> <Button type="primary" htmlType="submit">
提交
</Button>
<Button htmlType="reset">重置</Button> <Button htmlType="reset">重置</Button>
</Space> </Space>
</Form.Item> </Form.Item>