From 139fcc72b178ef33f73c0408f87cfa4fd3cb4611 Mon Sep 17 00:00:00 2001
From: brian <zhangyp1015@163.com>
Date: Wed, 19 Jul 2023 16:39:33 +0800
Subject: [PATCH] =?UTF-8?q?=E6=99=BA=E8=83=BD=E5=88=86=E6=9E=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                 |   1 +
 src/pages/AddChart/index.tsx | 125 +++++++++++++++++++++++------------
 2 files changed, 83 insertions(+), 43 deletions(-)

diff --git a/package.json b/package.json
index 8c920d3..97bf90a 100644
--- a/package.json
+++ b/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",
diff --git a/src/pages/AddChart/index.tsx b/src/pages/AddChart/index.tsx
index faf7f5e..f5f0f89 100644
--- a/src/pages/AddChart/index.tsx
+++ b/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,59 +31,88 @@ 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'>
-      <Form
-        name="addChart"
-        onFinish={onFinish}
-        initialValues={{  }}
-      >
-        <Form.Item 
-          name="goal"
-          label="分析目标"
-          rules={[{ required: true, message: '请输入分析目标!' }]}
-        >
-          <TextArea placeholder='请输入你的分析需求，比如：分析网站用户的增长情况'/>
-        </Form.Item>
+      <Row gutter={24}>
+        <Col span={12}>
+          <Card title="智能分析">
+            <Form
+              name="addChart"
+              onFinish={onFinish}
+              initialValues={{  }}
+            >
+              <Form.Item 
+                name="goal"
+                label="分析目标"
+                rules={[{ required: true, message: '请输入分析目标!' }]}
+              >
+                <TextArea placeholder='请输入你的分析需求，比如：分析网站用户的增长情况'/>
+              </Form.Item>
 
-        <Form.Item name="chartName" label="图表名称">
-          <Input placeholder='请输入图表名称'/>
-        </Form.Item>
+              <Form.Item name="chartName" label="图表名称">
+                <Input placeholder='请输入图表名称'/>
+              </Form.Item>
 
-        <Form.Item name="chartType" label="图表类型">
-          <Select 
-            placeholder="请选择图表类型"
-            options={[
-              {value: '折线图', label: '折线图'},
-              {value: '柱状图', label: '柱状图'},
-              {value: '堆叠图', label: '堆叠图'},
-              {value: '饼图', label: '饼图'},
-              {value: '雷达图', label: '雷达图'},
-            ]}
-          />            
-        </Form.Item>
+              <Form.Item name="chartType" label="图表类型">
+                <Select 
+                  placeholder="请选择图表类型"
+                  options={[
+                    {value: '折线图', label: '折线图'},
+                    {value: '柱状图', label: '柱状图'},
+                    {value: '堆叠图', label: '堆叠图'},
+                    {value: '饼图', label: '饼图'},
+                    {value: '雷达图', label: '雷达图'},
+                  ]}
+                />            
+              </Form.Item>
 
-        <Form.Item name="file" label="上传原始数据">
-          <Upload name="file">
-            <Button icon={<UploadOutlined />}>上传EXCEL文件</Button>
-          </Upload>
-        </Form.Item>
+              <Form.Item name="file" label="上传原始数据">
+                <Upload name="file">
+                  <Button icon={<UploadOutlined />}>上传EXCEL文件</Button>
+                </Upload>
+              </Form.Item>
 
-        <Form.Item wrapperCol={{ span: 12, offset: 6 }}>
-          <Space>
-            <Button type="primary" htmlType="submit">提交</Button>
-            <Button htmlType="reset">重置</Button>
-          </Space>
-        </Form.Item>
-      </Form>
+              <Form.Item wrapperCol={{ span: 12, offset: 6 }}>
+                <Space>
+                  <Button type="primary" htmlType="submit">提交</Button>
+                  <Button htmlType="reset">重置</Button>
+                </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;