智能分析

package.json

@@ -52,6 +52,7 @@
     "@umijs/route-utils": "^2.2.2",
     "antd": "^5.2.2",
     "classnames": "^2.3.2",
+    "echarts-for-react": "^3.0.2",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "omit.js": "^2.0.2",

src/pages/AddChart/index.tsx

@@ -1,13 +1,23 @@
 import { genChartByAiUsingPOST } from '@/services/answerbi/chartController';
 import { UploadOutlined } from '@ant-design/icons';
-import { Button, Form, Input, Select, Space, Upload, message } from 'antd';
+import { Button, Card, Col, Divider, Form, Input, Row, Select, Space, Spin, Upload, message } from 'antd';
 import TextArea from 'antd/es/input/TextArea';
-import React from 'react';
+import React, { useState } from 'react';
+import ReactECharts from 'echarts-for-react';
 
 
-const addChart: React.FC = () => {
+const AddChart: React.FC = () => {
+  //定义状态，用来接收后端返回值，让它实时展示再页面上
+  const [chart, setChart] = useState<API.BiResponse>();
+  const [option, setOption] = useState<any>();
+  const [submitting, setSubmitting] = useState<boolean>(false);
+
 
   const onFinish = async (values: any) => {
+    if(submitting) return;
+    setSubmitting(true);
+    setChart(undefined);
+    setOption(undefined);
     //对接后端，上传数据
     const params = {
       ...values,
@@ -21,15 +31,29 @@ const addChart: React.FC = () => {
         message.error('分析失败');
       }else{
         message.success('分析成功');
+        //解析成对象
+        console.log(res.data.genChart);
+        const chartOption = JSON.parse(res.data.genChart ?? '');
+        console.log(chartOption);
+        if(!chartOption){
+          throw new Error('图表代码解析错误')
+        }else{
+          setChart(res.data);
+          setOption(chartOption);
+        }
       }
     }catch(e: any){
       //异常情况下，提示分析失败+具体失败原因
       message.error('分析失败,' + e.message);
     }
+    setSubmitting(false);
   };
   
   return (
     <div className='add-chart'>
+      <Row gutter={24}>
+        <Col span={12}>
+          <Card title="智能分析">
             <Form
               name="addChart"
               onFinish={onFinish}
@@ -73,7 +97,22 @@ const addChart: React.FC = () => {
                 </Space>
               </Form.Item>
             </Form>
+          </Card>
+        </Col>
+
+        <Col span={12}>
+          <Card title="分析结论">
+            {chart?.genResult ?? <div>请先在左侧提交！</div>}
+            <Spin spinning={submitting} />
+          </Card>
+          <Divider />
+          <Card title="可视化图表">
+            {option ? <ReactECharts option={option} /> : <div>请先在左侧提交！</div>} 
+            <Spin spinning={submitting} />
+          </Card>
+        </Col>
+      </Row>
     </div>
   );
 };
-export default addChart;
+export default AddChart;