From 5381995c837b2bd5ff7e80b3f464e12871758113 Mon Sep 17 00:00:00 2001
From: "yunpeng.zhang" <zhangyp1015@163.com>
Date: Mon, 8 Apr 2024 13:31:54 +0800
Subject: [PATCH] =?UTF-8?q?[fix]=E9=83=A8=E7=BD=B2=E4=B8=8A=E7=BA=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Chart/AddChart/index.tsx      | 77 +++++++++++++++----------
 src/pages/Chart/AddChartAsync/index.tsx | 52 ++++++++---------
 2 files changed, 71 insertions(+), 58 deletions(-)

diff --git a/src/pages/Chart/AddChart/index.tsx b/src/pages/Chart/AddChart/index.tsx
index 1430e1d..d1f20f3 100644
--- a/src/pages/Chart/AddChart/index.tsx
+++ b/src/pages/Chart/AddChart/index.tsx
@@ -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>
diff --git a/src/pages/Chart/AddChartAsync/index.tsx b/src/pages/Chart/AddChartAsync/index.tsx
index e0cf16c..4ab7319 100644
--- a/src/pages/Chart/AddChartAsync/index.tsx
+++ b/src/pages/Chart/AddChartAsync/index.tsx
@@ -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>