fix(compiler): fix some bug

config/routes.ts

@@ -25,6 +25,16 @@
     icon: 'file',
     component: './Setting/UserManagement',
   },
+  {
+    path: '/home',
+    name: '家列表管理',
+    icon: 'file',
+    component: './Home',
+  },
+  {
+    path: '/room',
+    component: './Home/Room',
+  },
   {
     name: 'list.table-list',
     icon: 'table',

package.json

@@ -49,11 +49,12 @@
   "dependencies": {
     "@ant-design/icons": "^4.7.0",
     "@ant-design/pro-components": "1.1.1",
-    "@babel/core": "^7.19.3",
-    "@babel/preset-env": "^7.19.3",
+    "@babel/core": "^7.20.2",
+    "@babel/preset-env": "^7.20.2",
     "@umijs/route-utils": "^2.0.0",
     "antd": "^4.23.3",
     "classnames": "^2.3.0",
+    "echarts-for-react": "^3.0.2",
     "js-md5": "^0.7.3",
     "lodash": "^4.17.0",
     "moment": "^2.29.0",

src/pages/Welcome.tsx

@@ -1,7 +1,7 @@
 import { PageContainer } from '@ant-design/pro-components';
 import { Card } from 'antd';
 import React from 'react';
-import styles from './Welcome.less';
+import StatisticIndex from '../pages/statistical/index';
 
 /**
  * 欢迎首页
@@ -11,13 +11,14 @@ const Welcome: React.FC = () => {
   return (
     <PageContainer>
       <Card>
-        <div style={{ width: '100%' }} className={styles.welcome}>
-          <img src="/assets/welcome.png" className={styles.img_style} alt="" />
-          <div className={styles.welcome_text} style={{ marginTop: '10px' }}>
-            WELCOME
-          </div>
-          <div className={styles.welcome_text}>欢迎进入永续绿建管理平台</div>
-        </div>
+        <StatisticIndex />
+        {/*<div style={{ width: '100%' }} className={styles.welcome}>*/}
+        {/*  <img src="/assets/welcome.png" className={styles.img_style} alt="" />*/}
+        {/*  <div className={styles.welcome_text} style={{ marginTop: '10px' }}>*/}
+        {/*    WELCOME*/}
+        {/*  </div>*/}
+        {/*  <div className={styles.welcome_text}>欢迎进入永续绿建管理平台</div>*/}
+        {/*</div>*/}
       </Card>
     </PageContainer>
   );

src/pages/home/index.tsx

@@ -0,0 +1,205 @@
+import { PageContainer } from '@ant-design/pro-components';
+import { Button, Card, Form, Input, Select, Space } 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 { queryHomeList } from '@/services/home';
+
+// interface DataType {
+//   key: string;
+//   name: string;
+//   photo: string;
+//   number: number;
+//   status: number;
+//   record_id: string;
+// }
+
+/**
+ * 家列表
+ * @constructor
+ */
+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 [pagination, setPagination] = useState({ total: 0, current: 1, pageSize: 10 });
+
+  const getData = () => {
+    const params = {
+      q: 'page',
+      current: pagination.current,
+      pageSize: pagination.pageSize,
+      ...searchData,
+    };
+    queryHomeList(params).then((res) => {
+      if (res.code === 0) {
+        setDataList(res.data.list);
+        setPagination(res.data.pagination);
+        setLoading(false);
+        console.log(loading, dataList);
+      }
+    });
+  };
+
+  // useEffect(()=>{
+  //   setLoading(true);
+  //   getData();
+  // },[]);
+
+  useEffect(() => {
+    getData();
+  }, [searchData]);
+
+  // 查询
+  const onFinish = () => {
+    form.validateFields().then((data) => {
+      setLoading(true);
+      setSearchData(data);
+    });
+  };
+
+  // 重置
+  const onReset = () => {
+    form.resetFields();
+    setLoading(true);
+    setSearchData(null);
+  };
+
+  // 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 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 paginationProps = {
+  //   showSizeChanger: true,
+  //   showQuickJumper: true,
+  //   showTotal: (total: number) => {
+  //     return <span> 共 {total}条 </span>;
+  //   },
+  //   ...pagination,
+  // };
+
+  return (
+    <PageContainer>
+      <Card>
+        <Form form={form} layout="inline" onFinish={onFinish}>
+          <Form.Item name="name" label="名称">
+            <Input placeholder="请输入姓名" />
+          </Form.Item>
+          <Form.Item name="status" label="状态">
+            <Select style={{ width: '175px' }} placeholder="请选择状态">
+              <Select.Option key={1} value={1}>
+                在线
+              </Select.Option>
+              <Select.Option key={2} value={2}>
+                离线
+              </Select.Option>
+            </Select>
+          </Form.Item>
+          <Form.Item style={{ marginBottom: '10px' }}>
+            <Space>
+              <Button type="primary" htmlType="submit">
+                <SearchOutlined />
+                查询
+              </Button>
+              <Button htmlType="button" onClick={onReset}>
+                <ReloadOutlined />
+                重置
+              </Button>
+            </Space>
+          </Form.Item>
+        </Form>
+        {/*<Table*/}
+        {/*  columns={columns}*/}
+        {/*  dataSource={dataList}*/}
+        {/*  rowKey={(record: any) => record.record_id}*/}
+        {/*  pagination={paginationProps}*/}
+        {/*  loading={loading}*/}
+        {/*  onChange={tableChange}*/}
+        {/*  style={{ marginTop:'20px'}}*/}
+        {/*/>*/}
+      </Card>
+    </PageContainer>
+  );
+};
+export default Home;

src/pages/home/room/index.tsx

@@ -0,0 +1,206 @@
+import { PageContainer } from '@ant-design/pro-components';
+import React, { useEffect, useState } from 'react';
+import { Button, Card, Form, Input, Select, Space, Table } from 'antd';
+import { ReloadOutlined, SearchOutlined } from '@ant-design/icons';
+import { ColumnsType } from 'antd/es/table';
+import { history } from 'umi';
+import { queryRoomList } from '@/services/home';
+
+interface DataType {
+  key: string;
+  name: string;
+  photo: string;
+  number: number;
+  status: number;
+  record_id: string;
+}
+
+/**
+ * 房间列表
+ * @constructor
+ */
+const Room: React.FC = () => {
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState(false);
+  const [searchData, setSearchData] = useState<object | null>({});
+  const [pagination, setPagination] = useState({ total: 0, current: 1, pageSize: 10 });
+  const [dataList, setDataList] = useState([]);
+
+  // 获取列表数据秀
+  const getRoomList = () => {
+    const { state } = history.location;
+    const params = {
+      q: 'page',
+      home_id: state,
+      current: pagination.current,
+      pageSize: pagination.pageSize,
+      ...searchData,
+    };
+    queryRoomList(params).then((res) => {
+      if (res.code === 0) {
+        setDataList(res.data.list);
+        setPagination(res.data.pagination);
+        setLoading(false);
+      }
+    });
+  };
+
+  useEffect(() => {
+    getRoomList();
+  }, []);
+
+  useEffect(() => {
+    getRoomList();
+  }, [searchData]);
+
+  const onFinish = () => {
+    form.validateFields().then((data) => {
+      setLoading(true);
+      setSearchData(data);
+    });
+  };
+
+  // 重置
+  const onReset = () => {
+    form.resetFields();
+    setLoading(true);
+    setSearchData(null);
+  };
+
+  // table切换
+  const tableChange = (page: any) => {
+    setLoading(true);
+    const { state } = history.location;
+    const param = {
+      q: 'page',
+      current: page.current,
+      pageSize: page.pageSize,
+      home_id: state,
+      ...searchData,
+    };
+    queryRoomList(param).then((res) => {
+      if (res.code === 0) {
+        setDataList(res.data.list);
+        setPagination(res.data.pagination);
+        setLoading(false);
+      }
+    });
+  };
+
+  const columns: ColumnsType<DataType> = [
+    {
+      title: '序号',
+      align: 'center',
+      key: 'index',
+      render: (_: any, row: any, index: number) => index + 1,
+    },
+    {
+      title: '分控编号',
+      dataIndex: 'control_number',
+      key: 'control_number',
+    },
+    {
+      title: '家名称',
+      dataIndex: 'home_name',
+      key: 'home_name',
+    },
+    {
+      title: '姓名',
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: '类型',
+      dataIndex: 'type',
+      key: 'type',
+    },
+    {
+      title: '温度',
+      dataIndex: 'temperature',
+      key: 'temperature',
+    },
+    {
+      title: '湿度',
+      dataIndex: 'humidity',
+      key: 'humidity',
+    },
+    {
+      title: '是否为主控',
+      dataIndex: 'is_master',
+      key: 'is_master',
+      render: (v) => v && <span>{{ 1: '是', 2: '否' }[v]}</span>,
+    },
+    {
+      title: '模式',
+      dataIndex: 'power',
+      key: 'power',
+      render: (v) =>
+        v && <span>{{ 1: '制冷', 2: '制热', 3: '除湿', 4: '送风', 5: '自动' }[v]}</span>,
+    },
+    {
+      title: '风速',
+      dataIndex: 'power',
+      key: 'power',
+      render: (v) => v && <span>{v === 6 ? '自动' : v}</span>,
+    },
+    {
+      title: '状态',
+      dataIndex: 'power',
+      key: 'power',
+      render: (v) => v && <span>{{ 1: '开', 2: '关' }[v]}</span>,
+    },
+  ];
+
+  const paginationProps = {
+    showSizeChanger: true,
+    showQuickJumper: true,
+    showTotal: (total: number) => {
+      return <span> 共 {total}条 </span>;
+    },
+    ...pagination,
+  };
+
+  return (
+    <PageContainer>
+      <Card>
+        <Form form={form} layout="inline" onFinish={onFinish}>
+          <Form.Item name="name" label="名称">
+            <Input placeholder="请输入姓名" />
+          </Form.Item>
+          <Form.Item name="status" label="状态">
+            <Select style={{ width: '175px' }} placeholder="请选择状态">
+              <Select.Option key={1} value={1}>
+                在线
+              </Select.Option>
+              <Select.Option key={2} value={2}>
+                离线
+              </Select.Option>
+            </Select>
+          </Form.Item>
+          <Form.Item style={{ marginBottom: '10px' }}>
+            <Space>
+              <Button type="primary" htmlType="submit">
+                <SearchOutlined />
+                查询
+              </Button>
+              <Button htmlType="button" onClick={onReset}>
+                <ReloadOutlined />
+                重置
+              </Button>
+            </Space>
+          </Form.Item>
+        </Form>
+        <Table
+          columns={columns}
+          dataSource={dataList}
+          rowKey={(record: any) => record.record_id}
+          pagination={paginationProps}
+          loading={loading}
+          onChange={tableChange}
+          style={{ marginTop: '20px' }}
+        />
+      </Card>
+    </PageContainer>
+  );
+};
+export default Room;

src/pages/statistical/index.tsx

@@ -0,0 +1,49 @@
+import * as echarts from 'echarts';
+import React, { useEffect, useRef } from 'react';
+
+const Statistical: React.FC = () => {
+  const chartRef: any = useRef();
+
+  const options = {
+    // 标题
+    title: {
+      text: '柱状图',
+    },
+    // x轴
+    xAxis: {
+      type: 'category',
+      data: ['冬瓜', '茄子', '丝瓜', '玉米', '红薯', '西红柿', '芹菜'],
+    },
+    // y轴
+    yAxis: {
+      type: 'value',
+    },
+    series: [
+      {
+        data: [20, 9, 39, 43, 60, 18, 50],
+        type: 'bar', // 柱状图
+        name: '销量',
+      },
+    ],
+  };
+
+  useEffect(() => {
+    // 创建一个echarts实例，返回echarts实例。不能在单个容器中创建多个echarts实例
+    const chart = echarts.init(chartRef.current);
+
+    // 设置图表实例的配置项和数据
+    chart.setOption(options);
+
+    // 组件卸载
+    return () => {
+      chart.dispose();
+    };
+  }, []);
+
+  return (
+    <div>
+      <div style={{ width: '600px', height: '400px' }} ref={chartRef}></div>
+    </div>
+  );
+};
+export default Statistical;

src/services/home.ts

@@ -0,0 +1,18 @@
+import { request } from '@@/plugin-request/request';
+import { stringify } from 'qs';
+
+/**
+ * 家列表数据
+ * @param param
+ */
+export async function queryHomeList(param: object) {
+  return request(`/web/v1/homes?${stringify(param)}`);
+}
+
+/**
+ * 房间列表数据
+ * @param param
+ */
+export async function queryRoomList(param: object) {
+  return request(`/web/v1/rooms?${stringify(param)}`);
+}