feats

config/routes.js

@@ -159,6 +159,11 @@ export default [
         component: './Machinery/OperationStatistics/Detail',
         hideInMenu: true,
       },
+      {
+        path: '/Machinery/Sensing',
+        name: '传感设备列表',
+        component: './Machinery/Sensing',
+      },
     ],
   },
   {
@@ -305,22 +310,24 @@ export default [
         component: './SystemManagement/BasicParameters',
       },
       {
-        path: '/SystemManagement/Subsoiler',
-        name: '深松机',
+        path: '/SystemManagement/iot',
+        name: 'IOT平台',
         access: 'setting',
-        component: './SystemManagement/Subsoiler',
-      },
-      {
-        path: '/SystemManagement/Sensing',
-        name: '传感设备列表',
-        access: 'setting',
-        component: './SystemManagement/Sensing',
-      },
-      {
-        path: '/SystemManagement/Classification',
-        name: '分类管理',
-        access: 'setting',
-        component: './SystemManagement/Classification',
+        component: '../layouts/BasicLayout',
+        routes: [
+          {
+            path: '/SystemManagement/iot/Subsoiler',
+            name: '深松机',
+            access: 'setting',
+            component: './SystemManagement/Subsoiler',
+          },
+          {
+            path: '/SystemManagement/iot/Classification',
+            name: '外设分类',
+            access: 'setting',
+            component: './SystemManagement/Classification',
+          },
+        ],
       },
     ],
   },

src/pages/Machinery/Sensing/components/List.jsx

@@ -0,0 +1,122 @@
+import React from 'react';
+import { Link } from 'umi';
+import moment from 'moment';
+import { Button, Popconfirm, Dropdown, Menu } from 'antd';
+import PageTable from '@/components/PageTable';
+import { getDeviceList } from '@/services/device';
+import {} from '@/services/device';
+
+const formatterTime = (val) => {
+  return val && val !== '-' ? moment(val).format('YYYY-MM-DD') : '-';
+};
+
+const menus = (
+  <Menu>
+    <Menu.Item key="shensong">深松</Menu.Item>
+    <Menu.Item key="feifang">飞防</Menu.Item>
+  </Menu>
+);
+
+const List = (props, ref) => {
+  const { onBindOpt, onSyncDevice } = props;
+
+  const columns = [
+    {
+      title: '设备类型',
+      dataIndex: 'deviceType',
+      key: 'deviceType',
+      valueEnum: {
+        shensong: {
+          text: '深松',
+        },
+        feifang: {
+          text: '飞防',
+        },
+      },
+    },
+    {
+      title: '设备编号',
+      dataIndex: 'deviceNo',
+      key: 'deviceNo',
+      search: false,
+    },
+    {
+      title: '绑定农机',
+      dataIndex: 'machineryName',
+      key: 'machineryName',
+      search: false,
+    },
+    {
+      title: '注册时间',
+      dataIndex: 'createDate',
+      key: 'createDate',
+      render: formatterTime,
+      search: false,
+      width: 240,
+    },
+    {
+      title: '在线状态',
+      dataIndex: 'onlineStatus',
+      key: 'onlineStatus',
+      valueEnum: {
+        1: {
+          text: '在线',
+        },
+        0: {
+          text: '离线',
+        },
+      },
+    },
+    {
+      title: '操作',
+      valueType: 'option',
+      width: 160,
+      render: (_, record) => [
+        <Link
+          to={`/Machinery/OperationStatistics?deviceType=${record.deviceType}&deviceNo=${record.deviceNo}`}
+          key={1}
+        >
+          查看作业
+        </Link>,
+        record.machineryId === null ? (
+          <Button key={2} type="link" onClick={() => onBindOpt(record)}>
+            绑定
+          </Button>
+        ) : (
+          <Popconfirm key={3} title={`是否进行'解绑'操作?`} onConfirm={() => onBindOpt(record)}>
+            <Button type="link">解绑</Button>
+          </Popconfirm>
+        ),
+      ],
+    },
+  ];
+
+  const actionRef = React.useRef();
+
+  React.useImperativeHandle(ref, () => {
+    return {
+      reload: () => actionRef.current.reload(),
+    };
+  });
+
+  return (
+    <PageTable
+      request={getDeviceList}
+      actionRef={actionRef}
+      columns={columns}
+      rowKey={(row) => `${row.deviceType}-${row.deviceNo}`}
+      options={false}
+      toolBarRender={() => [
+        <Button key={1} type="primary">
+          同步深松
+        </Button>,
+        <Button key={3} type="primary">
+          同步飞防
+        </Button>,
+      ]}
+      scroll={{ x: 1000 }}
+    />
+  );
+};
+
+export default React.forwardRef(List);

src/pages/Machinery/Sensing/components/MaBind.jsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import { Modal, Form, Select, Button } from 'antd';
+import { getMachineryTypeList } from '@/services/machineryType';
+import { getMachineryList } from '@/services/machinery';
+
+const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 14 } };
+const FormItem = Form.Item;
+const Option = Select.Option;
+
+export default (props) => {
+  const { open, onCancel, onFinish } = props;
+
+  const [form] = Form.useForm();
+  const [machineryTypeList, setMachineryTypeList] = React.useState([]);
+  const [typeId, setTypeId] = React.useState();
+  const [machineryList, setMachineryList] = React.useState([]);
+  const [machineryId, setMachineryId] = React.useState();
+  const [loading, setLoading] = React.useState(false);
+
+  // 查询分类列表, 构造下拉框
+  React.useEffect(() => {
+    getMachineryTypeList({ pageSize: 999 })
+      .then((res) => {
+        setMachineryTypeList(res.records);
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
+  }, []);
+
+  // 联动下拉列表
+  React.useEffect(() => {
+    if (typeId) {
+      getMachineryList({ typeId })
+        .then((e) => {
+          setMachineryList(e.records || []);
+        })
+        .catch((err) => {
+          console.log(err.message);
+        });
+    }
+  }, [typeId]);
+
+  return (
+    <Modal title="绑定农机" visible={open} maskClosable={false} footer={null} onCancel={onCancel}>
+      <Form {...formItemLayout} onFinish={onFinish} form={form}>
+        <FormItem
+          label="农机分类"
+          name="typeId"
+          rules={[{ required: true, message: '请选择农机分类' }]}
+        >
+          <Select value={typeId} onChange={setTypeId} allowClear style={{ width: '320px' }}>
+            {machineryTypeList.map((item) => (
+              <Option value={item.typeId} key={item.typeId}>
+                {item.name}
+              </Option>
+            ))}
+          </Select>
+        </FormItem>
+        <FormItem
+          label="选择农机"
+          name="machineryId"
+          rules={[{ required: true, message: '请选择农机名' }]}
+        >
+          <Select
+            value={machineryId}
+            onChange={setMachineryId}
+            allowClear
+            style={{ width: '320px' }}
+          >
+            {machineryList.map((item) => (
+              <Option value={item.machineryId} key={item.machineryId}>
+                {item.name}
+              </Option>
+            ))}
+          </Select>
+        </FormItem>
+        <FormItem label=" " colon={false}>
+          <Button type="default" onClick={onCancel}>
+            取消
+          </Button>
+          <Button type="primary" loading={loading} htmlType="Submit" style={{ marginLeft: '2em' }}>
+            确认
+          </Button>
+        </FormItem>
+      </Form>
+    </Modal>
+  );
+};

src/pages/Machinery/Sensing/index.jsx

@@ -0,0 +1,57 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Button, Modal, Select, Form, message } from 'antd';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import { addDevice, deleteDevice } from '@/services/device';
+import List from './components/List';
+import MaBind from './components/MaBind';
+
+export default (props) => {
+  // 绑定表单
+
+  const [open, setOpen] = useState(false);
+  const [device, setDevice] = useState();
+  const listRef = useRef();
+
+  // 绑定农机
+  const onBind = ({ machineryId }) => {
+    const data = { ...device, machineryId };
+    addDevice(data).then((res) => {
+      setOpen(false);
+      message.success(`绑定成功`);
+      listRef.current.reload();
+    });
+  };
+
+  // 解绑
+  const unBind = (deviceId) => {
+    deleteDevice(deviceId)
+      .then(() => {
+        // setLoading(false);
+        message.success(`解绑成功`);
+        listRef.current.reload();
+      })
+      .catch((err) => {
+        // setLoading(false);
+        message.error(err.message || err);
+      });
+  };
+
+  // 设备农机绑定或者解绑操作
+  const onBindOpt = (row) => {
+    setDevice({ ...row });
+
+    if (!row.machineryId) {
+      // 农机ID 不存在, 说明是绑定业务
+      setOpen(true);
+    } else {
+      unBind(row.deviceId);
+    }
+  };
+
+  return (
+    <PageHeaderWrapper>
+      <List ref={listRef} onBindOpt={onBindOpt} onSyncDevice={console.log} />
+      <MaBind open={open} device={device} onCancel={() => setOpen(false)} onFinish={onBind} />
+    </PageHeaderWrapper>
+  );
+};

src/pages/SystemManagement/Sensing/index.jsx

@@ -1,232 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { Button, Modal, Select, Form, message } from 'antd';
-import { PageHeaderWrapper } from '@ant-design/pro-layout';
-import moment from 'moment';
-import PageTable from '@/components/PageTable';
-import { getDeviceList, deleteDevice, addDevice } from '@/services/device';
-import { getMachineryList } from '@/services/machinery';
-import { getMachineryTypeList } from '@/services/machineryType';
-import { Link } from 'umi';
-
-const formatterTime = (val) => {
-  return val && val !== '-' ? moment(val).format('YYYY-MM-DD') : '-';
-};
-
-export default (props) => {
-  // 绑定表单
-  const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 14 } };
-  const [form] = Form.useForm();
-  const [editModal, setEditModal] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const [machineryId, setMachineryId] = useState();
-  const [device, setDeviceList] = useState();
-  const actionRef = useRef();
-  const [machineryTypeList, setMachineryTypeList] = useState([]);
-  const [typeId, setTypeId] = useState();
-  const [machineryList, setMachineryList] = useState([]);
-  const { Option } = Select;
-  const FormItem = Form.Item;
-
-  //列表编辑
-  const handelEdit = (val) => {
-    if (val.machineryId != null) {
-      setEditModal(false);
-      const title = '确认当前设备要解绑"' + val.machineryName + '"农机设备吗？';
-      Modal.confirm({
-        title: title,
-        okText: '确认',
-        cancelText: '取消',
-        onOk () {
-          deleteDevice(val.deviceId)
-            .then(() => {
-              setLoading(false);
-              message.success(`解绑成功`);
-              onCancel();
-              actionRef.current.reload();
-
-            })
-            .catch((err) => {
-              setLoading(false);
-              message.error(err.message || err);
-            });
-        }
-      })
-    } else {
-      setEditModal(true);
-      setDeviceList(val);
-    }
-
-    form.setFieldsValue(val);
-  };
-
-  //绑定弹窗关闭
-  const onCancel = () => {
-    setEditModal(false);
-  };
-
-  // 绑定提交
-  const Submit = (values) => {
-    let params = { ...device, ...values };
-    setLoading(true);
-    addDevice(params).then((res) => {
-      setLoading(false);
-      message.success(`绑定成功`);
-      actionRef.current.reload();
-      onCancel();
-    });
-  };
-
-  useEffect(() => {
-    getMachineryTypeList({ pageSize: 999 }).then((res) => {
-      setMachineryTypeList(res.records);
-    }).catch((err) => {
-      console.log(err.message)
-    });
-  }, []);
-
-  useEffect(() => {
-    if (typeId) {
-      getMachineryList({ typeId }).then((e) => {
-        setMachineryList(e.records);
-      }).catch((err) => {
-        console.log(err.message)
-      });
-    }
-
-  }, [typeId])
-
-  const columns = [
-    {
-      title: '行号',
-      dataIndex: 'deviceId',
-      key: 'deviceId',
-    },
-    {
-      title: '设备编号',
-      dataIndex: 'deviceNo',
-      key: 'deviceNo',
-      search: false,
-    },
-    {
-      title: '设备类型',
-      dataIndex: 'deviceType',
-      key: 'deviceType',
-      valueEnum: {
-        shensong: {
-          text: '深松',
-        },
-        feifang: {
-          text: '飞防',
-        },
-      },
-      // request: () => queryTable(getDeviceList)(),
-    },
-    {
-      title: '在线状态',
-      dataIndex: 'onlineStatus',
-      key: 'onlineStatus',
-      valueEnum: {
-        1: {
-          text: '在线',
-        },
-        0: {
-          text: '离线',
-        },
-      },
-      // render: (_, record) => {
-      //   return record.onlineStatus === 1 ? '在线' : '离线';
-      // },
-    },
-    {
-      title: '注册时间',
-      dataIndex: 'createDate',
-      key: 'createDate',
-      render: formatterTime,
-      search: false,
-      width: 240,
-    },
-    {
-      title: '绑定农机',
-      dataIndex: 'machineryId',
-      key: 'machineryId',
-      search: false,
-    },
-    {
-      title: '操作',
-      valueType: 'option',
-      width: 160,
-      render: (_, record) => [
-        <Link to={`/Machinery/OperationStatistics`} key={2} >查看作业</Link>,
-        <Button style={{ padding: 0 }} type="link" key={3} onClick={() => handelEdit(record)}>
-          {record.machineryId === null ? '绑定' : '解绑'}
-        </Button>,
-      ],
-    },
-  ];
-
-  return (
-    <PageHeaderWrapper>
-      <PageTable
-        request={getDeviceList}
-        columns={columns}
-        actionRef={actionRef}
-        rowKey="deviceId"
-        options={false}
-        toolBarRender={() => [
-          <Button
-            key="1"
-            type="primary"
-          >
-            +同步设备信息
-          </Button>,
-        ]}
-        scroll={{ x: 1000 }}
-      />
-      <Modal
-        forceRender
-        title="绑定农机"
-        visible={editModal}
-        onCancel={onCancel}
-        keyboard={false}
-        maskClosable={false}
-        destroyOnClose={true}
-        footer={null}
-        machineryId={machineryId}
-      >
-        <Form  {...formItemLayout} onFinish={Submit} form={form}>
-          <FormItem label="农机分类" name="typeId" rules={[{ required: true, message: '请选择农机分类' }]}>
-            <Select value={typeId} onChange={setTypeId} allowClear style={{ width: '320px' }}>
-              {machineryTypeList.map((item) => (
-                <Option value={item.typeId} key={item.typeId}>
-                  {item.name}
-                </Option>
-              ))}
-            </Select>
-          </FormItem>
-          <FormItem label="选择农机" name="machineryId" rules={[{ required: true, message: '请选择农机名' }]}>
-            <Select value={machineryId} onChange={setMachineryId} allowClear style={{ width: '320px' }}>
-              {machineryList.map((item) => (
-                <Option value={item.machineryId} key={item.machineryId}>
-                  {item.name}
-                </Option>
-              ))}
-            </Select>
-          </FormItem>
-          <FormItem label=" " colon={false}>
-            <Button type="default" onClick={onCancel} style={{ marginTop: '2em', marginLeft: '4em' }}>
-              取消
-            </Button>
-            <Button
-              type="primary"
-              loading={loading}
-              htmlType="Submit"
-              style={{ marginTop: '2em', marginLeft: '2em' }}
-            >
-              确认
-            </Button>
-          </FormItem>
-        </Form>
-      </Modal>
-    </PageHeaderWrapper>
-  );
-};