From 521aca96d025c428552343b84b04e69f00a55162 Mon Sep 17 00:00:00 2001
From: brian <zhangyp1015@163.com>
Date: Thu, 20 Jul 2023 17:54:21 +0800
Subject: [PATCH] =?UTF-8?q?=E6=88=91=E7=9A=84=E5=9B=BE=E8=A1=A8=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 config/routes.ts                         |  13 ++-
 src/global.less                          |   4 +
 src/pages/{ => Chart}/AddChart/index.tsx |   0
 src/pages/Chart/MyChart/index.tsx        | 126 +++++++++++++++++++++++
 4 files changed, 139 insertions(+), 4 deletions(-)
 rename src/pages/{ => Chart}/AddChart/index.tsx (100%)
 create mode 100644 src/pages/Chart/MyChart/index.tsx

diff --git a/config/routes.ts b/config/routes.ts
index 4825ffa..ea00e5c 100644
--- a/config/routes.ts
+++ b/config/routes.ts
@@ -7,12 +7,17 @@ export default [
       { name: '注册', path: '/user/register', component: './User/Register' }
     ],
   },
-  
   {
     name: '智能分析',
-    path: '/add_chart',
+    path: '/analyze',
     icon: 'barChart',
-    component: './AddChart'
+    component: './Chart/AddChart'
+  },
+  {
+    name: '我的图表',
+    path: '/my_chart',
+    icon: 'pieChart',
+    component: './Chart/MyChart'
   },
   {
     path: '/admin',
@@ -24,6 +29,6 @@ export default [
       { path: '/admin/user-manage', name: '用户管理', icon: 'smile', component: './Admin/UserManage' },
     ],
   },
-  { path: '/', redirect: '/add_chart' },
+  { path: '/', redirect: '/analyze' },
   { path: '*', layout: false, component: './404' },
 ];
diff --git a/src/global.less b/src/global.less
index a9a0c51..452a350 100644
--- a/src/global.less
+++ b/src/global.less
@@ -51,3 +51,7 @@ ol {
     }
   }
 }
+
+.margin-16 {
+  margin-bottom: 16px;
+}
\ No newline at end of file
diff --git a/src/pages/AddChart/index.tsx b/src/pages/Chart/AddChart/index.tsx
similarity index 100%
rename from src/pages/AddChart/index.tsx
rename to src/pages/Chart/AddChart/index.tsx
diff --git a/src/pages/Chart/MyChart/index.tsx b/src/pages/Chart/MyChart/index.tsx
new file mode 100644
index 0000000..8a02055
--- /dev/null
+++ b/src/pages/Chart/MyChart/index.tsx
@@ -0,0 +1,126 @@
+import { listMyChartByPageUsingPOST } from '@/services/answerbi/chartController';
+import { useModel } from '@umijs/max';
+import { Avatar, Card, List, message } from 'antd';
+import Search from 'antd/es/input/Search';
+import ReactECharts from 'echarts-for-react';
+import React, { useEffect, useState } from 'react';
+
+
+const MyChartPage: React.FC = () => {
+  const initSearchParams = {
+    current: 1,
+    pageSize: 4,
+  }
+
+  const [searchParams, setSearchParams] = useState<API.ChartQueryRequest>({...initSearchParams});
+
+  const [chartList,setChartList] = useState<API.Chart[]>();
+  const [total, setTotal] = useState<number>(0);
+  //页面加载状态
+  const [loading, setLoading] = useState<boolean>(true);
+
+  //从全局状态中获取当前登录用户信息
+  const { initialState } = useModel('@@initialState')
+  const { currentUser } = initialState ?? {};
+  //获取数据
+  const loadData = async () => {
+    setLoading(true);
+    try {
+      const res = await listMyChartByPageUsingPOST(searchParams);
+
+      if(res.data){
+        setChartList(res.data.records ?? []);
+        setTotal(res.data.total ?? 0);
+        //去除图表标题
+        if(res.data.records){
+          res.data.records.forEach(data => {
+            const chartOption = JSON.parse(data.genChart ?? '{}');
+            chartOption.title = undefined;
+            data.genChart = JSON.stringify(chartOption);
+          })
+        }
+      }else{
+        message.error('获取我的图表失败');
+      }
+    } catch (e : any) {
+      message.error('获取我的图表失败，' + e.message);
+    }
+    setLoading(false);
+  }
+  
+  //首次加载页面时，触发加载数据
+  useEffect(() => {
+    //这个页面首次渲染的时候，以及这个数组中的搜索条件发生变化的时候，会执行loadData方法，自动触发重新搜索
+    loadData();
+  },[searchParams]);
+
+
+  return (
+    <div className='my-chart-page'>
+      <div>
+        <Search placeholder="请输入图表名称" enterButton loading={loading} onSearch={(value) => {
+          setSearchParams({
+            ...initSearchParams,
+            chartName: value,
+          })
+        }}/>
+      </div>
+      <div className='margin-16'/>
+      <List
+        /*
+          栅格间隔16像素；
+          xs屏幕<576px,栅格数1；
+          sm屏幕≥576px,栅格数1；
+          md屏幕≥768px,栅格数1；
+          lg屏幕≥992px,栅格数2；
+          xl屏幕≥1200px,栅格数2；
+          xxl屏幕≥1660px,栅格数2
+        */
+        grid={{
+          gutter: 16,
+          xs: 1,
+          sm: 1,
+          md: 1,
+          lg: 2,
+          xl: 2,
+          xxl: 2,
+        }}
+        pagination={{
+          onChange: (page, pageSize) => {
+            setSearchParams({
+              ...searchParams,
+              current: page,
+              pageSize,
+            })
+          },
+          current: searchParams.current,
+          pageSize: searchParams.pageSize,
+          total: total,
+        }}
+        loading={loading}
+        dataSource={chartList}
+        footer={
+          <div>
+            <b>ant design</b> footer part
+          </div>
+        }
+        renderItem={(item) => (
+          <List.Item key={item.id}>
+            <Card style={{ width: '100%' }}>
+              <List.Item.Meta
+                avatar={<Avatar src={currentUser && currentUser.userAvatar} />}
+                title={item.chartName}
+                description={item.chartType ? '图表类型' + item.chartType : undefined}
+              />
+              <div style={{ marginBottom: 16 }} />
+              {'分析目标' + item.goal}
+              <div style={{ marginBottom: 16 }} />
+              <ReactECharts option={JSON.parse(item.genChart ?? '{}')}></ReactECharts>
+            </Card>
+          </List.Item>
+        )}
+      />
+    </div>
+  );
+};
+export default MyChartPage;