fix(compiler): fix some bug

package.json

@@ -54,7 +54,7 @@
     "@umijs/route-utils": "^2.0.0",
     "antd": "^4.23.3",
     "classnames": "^2.3.0",
-    "echarts-for-react": "^3.0.2",
+    "echarts": "^5.4.0",
     "js-md5": "^0.7.3",
     "lodash": "^4.17.0",
     "moment": "^2.29.0",

src/pages/home/index.tsx

@@ -1,19 +1,17 @@
 import { PageContainer } from '@ant-design/pro-components';
-import { Button, Card, Form, Input, Select, Space } from 'antd';
+import { Button, Card, Form, Input, Select, Space, Table } from 'antd';
 import React, { useEffect, useState } from 'react';
 import { ReloadOutlined, SearchOutlined } from '@ant-design/icons';
-// import { history } from 'umi';
-// import {ColumnsType} from "antd/es/table";
+import { history } from 'umi';
+import { ColumnsType } from 'antd/es/table';
 import { queryHomeList } from '@/services/home';
 
-// interface DataType {
-//   key: string;
-//   name: string;
-//   photo: string;
-//   number: number;
-//   status: number;
-//   record_id: string;
-// }
+interface DataType {
+  name: string;
+  member: any[];
+  power: number;
+  record_id: string;
+}
 
 /**
  * 家列表
@@ -23,16 +21,7 @@ const Home: React.FC = () => {
   const [form] = Form.useForm();
   const [loading, setLoading] = useState(false);
   const [searchData, setSearchData] = useState<object | null>({});
-  const [dataList, setDataList] = useState([
-    {
-      photo:
-        '/s/yongxu/1t7svi0uq7jcofyssvo2czj200w7iwdr/%E6%B0%B8%E7%BB%AD%E7%BB%BF%E5%BB%BAlogo.png',
-      name: '家',
-      number: 12,
-      status: 1,
-      record_id: 1,
-    },
-  ]);
+  const [dataList, setDataList] = useState([]);
   const [pagination, setPagination] = useState({ total: 0, current: 1, pageSize: 10 });
 
   const getData = () => {
@@ -47,15 +36,14 @@ const Home: React.FC = () => {
         setDataList(res.data.list);
         setPagination(res.data.pagination);
         setLoading(false);
-        console.log(loading, dataList);
       }
     });
   };
 
-  // useEffect(()=>{
-  //   setLoading(true);
-  //   getData();
-  // },[]);
+  useEffect(() => {
+    setLoading(true);
+    getData();
+  }, []);
 
   useEffect(() => {
     getData();
@@ -77,87 +65,86 @@ const Home: React.FC = () => {
   };
 
   // table切换
-  // const tableChange = (page: any) => {
-  //   setLoading(true);
-  //   const param = {
-  //     q: 'page',
-  //     current: page.current,
-  //     pageSize: page.pageSize,
-  //     ...searchData,
-  //   };
-  //   queryHomeList(param).then(res =>{
-  //     if (res.code === 0) {
-  //       setDataList(res.data.list);
-  //       setPagination(res.data.pagination);
-  //       setLoading(false);
-  //     }
-  //   })
-  // }
+  const tableChange = (page: any) => {
+    setLoading(true);
+    const param = {
+      q: 'page',
+      current: page.current,
+      pageSize: page.pageSize,
+      ...searchData,
+    };
+    queryHomeList(param).then((res) => {
+      if (res.code === 0) {
+        setDataList(res.data.list);
+        setPagination(res.data.pagination);
+        setLoading(false);
+      }
+    });
+  };
 
   // 跳转到房间
-  // const toRoom = (record: DataType) => {
-  //   history.push({ pathname  : '/room' , state :record.record_id})
-  // }
+  const toRoom = (record: DataType) => {
+    history.push({ pathname: '/room', state: record.record_id });
+  };
 
-  // const columns: ColumnsType<DataType> = [
-  //   {
-  //     title: '序号',
-  //     align: 'center',
-  //     key: 'index',
-  //     render: (_: any, row: any, index: number) => index + 1,
-  //   },
-  //   {
-  //     title: '头像',
-  //     dataIndex: 'photo',
-  //     key: 'photo',
-  //     render: (v) => v && <Image width={50} src={v} alt="头像" />,
-  //   },
-  //   {
-  //     title: '姓名',
-  //     dataIndex: 'name',
-  //     key: 'name',
-  //   },
-  //   {
-  //     title: '成员人数',
-  //     dataIndex: 'number',
-  //     key: 'number',
-  //   },
-  //   {
-  //     title: '状态',
-  //     dataIndex: 'status',
-  //     key: 'status',
-  //     render: (v) =>
-  //       v && (
-  //         <span style={{ color: `${{ 1: '#00a650', 2: 'red' }[v]}` }}>
-  //           {{ 1: '在线', 2: '离线' }[v]}
-  //         </span>
-  //       ),
-  //   },
-  //   {
-  //     title: '操作',
-  //     key: 'action',
-  //     render: (_, record) => (
-  //       <Space size="middle">
-  //         <a
-  //           onClick={() => {
-  //             toRoom(record);
-  //           }}
-  //         >
-  //           查看房间
-  //         </a>
-  //       </Space>
-  //     ),
-  //   },
-  // ]
+  const columns: ColumnsType<DataType> = [
+    {
+      title: '序号',
+      align: 'center',
+      key: 'index',
+      render: (_: any, row: any, index: number) => index + 1,
+    },
+    {
+      title: '名称',
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: '成员人数',
+      dataIndex: 'member',
+      key: 'member',
+      render: (v) => v && <span>{v.length}</span>,
+    },
+    {
+      title: '地区',
+      dataIndex: 'district',
+      key: 'district',
+    },
+    {
+      title: '状态',
+      dataIndex: 'power',
+      key: 'power',
+      render: (v) => (
+        <span style={{ color: `${{ 1: 'red', 2: '#00a650' }[v]}` }}>
+          {{ 0: '离线', 1: '在线' }[v]}
+        </span>
+      ),
+    },
+    {
+      title: '操作',
+      key: 'action',
+      render: (_, record) => (
+        <Space size="middle">
+          <a
+            onClick={() => {
+              toRoom(record);
+            }}
+          >
+            查看房间
+          </a>
+        </Space>
+      ),
+    },
+  ];
 
-  // const paginationProps = {
-  //   showSizeChanger: true,
-  //   showQuickJumper: true,
-  //   showTotal: (total: number) => {
-  //     return <span> 共 {total}条 </span>;
-  //   },
-  //   ...pagination,
-  // };
+  const paginationProps = {
+    showSizeChanger: true,
+    showQuickJumper: true,
+    showTotal: (total: number) => {
+      return <span> 共 {total}条 </span>;
+    },
+    ...pagination,
+  };
 
   return (
     <PageContainer>
@@ -189,15 +176,15 @@ const Home: React.FC = () => {
             </Space>
           </Form.Item>
         </Form>
-        {/*<Table*/}
-        {/*  columns={columns}*/}
-        {/*  dataSource={dataList}*/}
-        {/*  rowKey={(record: any) => record.record_id}*/}
-        {/*  pagination={paginationProps}*/}
-        {/*  loading={loading}*/}
-        {/*  onChange={tableChange}*/}
-        {/*  style={{ marginTop:'20px'}}*/}
-        {/*/>*/}
+        <Table
+          columns={columns}
+          dataSource={dataList}
+          rowKey={(record: any) => record.record_id}
+          pagination={paginationProps}
+          loading={loading}
+          onChange={tableChange}
+          style={{ marginTop: '20px' }}
+        />
       </Card>
     </PageContainer>
   );

src/pages/home/room/index.tsx

@@ -7,10 +7,14 @@ import { history } from 'umi';
 import { queryRoomList } from '@/services/home';
 
 interface DataType {
-  key: string;
+  control_number: number;
+  home_name: string;
   name: string;
-  photo: string;
-  number: number;
+  type: string;
+  temperature: number;
+  humidity: number;
+  is_master: number;
+  power: number;
   status: number;
   record_id: string;
 }
@@ -105,7 +109,7 @@ const Room: React.FC = () => {
       key: 'home_name',
     },
     {
-      title: '姓名',
+      title: '房间名称',
       dataIndex: 'name',
       key: 'name',
     },
@@ -187,6 +191,7 @@ const Room: React.FC = () => {
                 <ReloadOutlined />
                 重置
               </Button>
+              <Button>返回</Button>
             </Space>
           </Form.Item>
         </Form>