fix(compiler): 新增家庭管理远程控制功能

config/proxy.ts

@@ -18,7 +18,8 @@ export default {
     },
     '/web/': {
       // 要代理的地址
-      target: 'http://yongxu.yehaoji.cn:8199',
+      target: 'http://yongxu.yehaoji.cn:8199', // 开发
+      // target: 'https://app.yongxulvjian.com', // 生产
       changeOrigin: true,
     },
     '/s/': {

src/pages/home/index.tsx

@@ -1,10 +1,11 @@
 import { PageContainer } from '@ant-design/pro-components';
-import { Button, Card, Form, Input, Select, Space, Table } from 'antd';
+import { Button, Card, Form, Input, Space, Table } from 'antd';
 import React, { useEffect, useState } from 'react';
 import { ReloadOutlined, SearchOutlined } from '@ant-design/icons';
 import { history } from 'umi';
 import type { ColumnsType } from 'antd/es/table';
 import { queryHomeList } from '@/services/home';
+import Overwrite from '@/pages/home/overwrite';
 
 interface DataType {
   name: string;
@@ -23,6 +24,8 @@ const Home: React.FC = () => {
   const [searchData, setSearchData] = useState<object | null>({});
   const [dataList, setDataList] = useState([]);
   const [pagination, setPagination] = useState({ total: 0, current: 1, pageSize: 10 });
+  const [visible, setVisible] = useState(false);
+  const [editData, setEditData] = useState(null);
 
   const getData = () => {
     const params = {
@@ -82,6 +85,18 @@ const Home: React.FC = () => {
     });
   };
 
+  // 下发
+  const onOverwrite = (data: any) => {
+    setVisible(true);
+    setEditData(data);
+  };
+
+  // 下发弹框回调
+  const overwriteCallback = () => {
+    setVisible(false);
+    getData();
+  };
+
   // 跳转到房间
   const toRoom = (record: DataType) => {
     history.push({ pathname: '/roomList', state: record.record_id });
@@ -96,9 +111,22 @@ const Home: React.FC = () => {
     },
     {
       title: '名称',
+      width: 200,
       dataIndex: 'name',
       key: 'name',
     },
+    {
+      title: '设备编号',
+      width: 100,
+      dataIndex: 'gateway',
+      key: 'gateway',
+    },
+    {
+      title: '设备是否在线',
+      dataIndex: 'is_online',
+      key: 'is_online',
+      render: (v) => <span>{v ? '在线' : '离线'}</span>,
+    },
     {
       title: '成员人数',
       dataIndex: 'member',
@@ -110,16 +138,6 @@ const Home: React.FC = () => {
       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',
@@ -132,6 +150,13 @@ const Home: React.FC = () => {
           >
             查看房间
           </a>
+          <a
+            onClick={() => {
+              onOverwrite(record);
+            }}
+          >
+            远程配置
+          </a>
         </Space>
       ),
     },
@@ -150,18 +175,11 @@ const Home: React.FC = () => {
     <PageContainer>
       <Card>
         <Form form={form} layout="inline" onFinish={onFinish}>
-          <Form.Item name="name" label="名称">
-            <Input placeholder="请输入姓名" />
+          <Form.Item name="like_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 name="like_gateway" label="设备编号">
+            <Input placeholder="请输入设备编号" />
           </Form.Item>
           <Form.Item style={{ marginBottom: '10px' }}>
             <Space>
@@ -185,6 +203,9 @@ const Home: React.FC = () => {
           onChange={tableChange}
           style={{ marginTop: '20px' }}
         />
+        {visible && (
+          <Overwrite visible={visible} editCallback={overwriteCallback} params={editData} />
+        )}
       </Card>
     </PageContainer>
   );

src/pages/home/overwrite.tsx

@@ -0,0 +1,127 @@
+import React from 'react';
+import { Col, Row, Form, Input, Modal, Select, message, InputNumber, Tabs } from 'antd';
+import { overwriteData } from '@/services/home';
+
+interface userEditPros {
+  visible: boolean;
+  editCallback: () => void;
+  params: any;
+}
+
+/**
+ * 下发页面
+ * @param props
+ * @constructor
+ */
+const Overwrite: React.FC<userEditPros> = (props) => {
+  const { visible, editCallback, params } = props;
+
+  const [form] = Form.useForm();
+
+  const { TabPane } = Tabs;
+
+  // 下发
+  const onOk = () => {
+    form.validateFields().then((values) => {
+      if (values) {
+        const data = {
+          gateway: params.gateway,
+          gear: values.gear,
+          value: values.value,
+        };
+        overwriteData(data)
+          .then((res) => {
+            if (res.code === 0) {
+              message.success('编辑成功');
+              editCallback();
+            } else {
+              message.error(res?.message);
+              editCallback();
+            }
+          })
+          .catch((e) => {
+            message.error(e?.message);
+            editCallback();
+          });
+      }
+    });
+  };
+
+  // 取消
+  const onCancel = () => {
+    editCallback();
+  };
+
+  const formItemLayout = {
+    labelCol: {
+      span: 6,
+    },
+    wrapperCol: {
+      span: 16,
+    },
+  };
+
+  return (
+    <Modal
+      title="下发管理"
+      open={visible}
+      onOk={onOk}
+      onCancel={onCancel}
+      width={800}
+      okText="下发"
+    >
+      <Tabs defaultActiveKey="1">
+        <TabPane tab="档位电压" key="1">
+          <Form form={form}>
+            <Row>
+              <Col span={24}>
+                <Form.Item
+                  {...formItemLayout}
+                  name="gateway"
+                  label="设备编号"
+                  initialValue={params?.gateway}
+                >
+                  <Input placeholder="请输入设备编号" readOnly defaultValue={params.gateway} />
+                </Form.Item>
+              </Col>
+              <Col span={24}>
+                <Form.Item
+                  {...formItemLayout}
+                  name="gear"
+                  label="档位"
+                  rules={[{ required: true, message: '请选择档位' }]}
+                  initialValue={params?.gear}
+                >
+                  <Select placeholder="请选择档位">
+                    <Select.Option value={1}>一档</Select.Option>
+                    <Select.Option value={2}>二档</Select.Option>
+                    <Select.Option value={3}>三档</Select.Option>
+                    <Select.Option value={4}>四档</Select.Option>
+                    <Select.Option value={5}>五档</Select.Option>
+                  </Select>
+                </Form.Item>
+              </Col>
+              <Col span={24}>
+                <Form.Item
+                  {...formItemLayout}
+                  name="value"
+                  label="电压"
+                  rules={[{ required: true, message: '请输入电压' }]}
+                  initialValue={params?.value}
+                >
+                  <InputNumber
+                    placeholder="请输入电压"
+                    style={{ width: '100%' }}
+                    min={0}
+                    max={100}
+                  />
+                </Form.Item>
+              </Col>
+            </Row>
+          </Form>
+        </TabPane>
+      </Tabs>
+    </Modal>
+  );
+};
+export default Overwrite;

src/services/home.ts

@@ -16,3 +16,14 @@ export async function queryHomeList(param: object) {
 export async function queryRoomList(param: object) {
   return request(`/web/v1/rooms?${stringify(param)}`);
 }
+
+/**
+ * 下发参数
+ * @param params
+ */
+export async function overwriteData(params: object) {
+  return request(`/web/v1/control/fan_voltage`, {
+    method: 'POST',
+    data: params,
+  });
+}