feats

config/routes.js

@@ -178,12 +178,12 @@ export default [
         access: 'deviceJobDetail',
         hideInMenu: true,
       },
-      {
-        path: '/iot/Subsoiler',
-        name: '深松机',
-        component: './SystemManagement/Subsoiler',
-        access: 'shensong',
-      },
+      // {
+      //   path: '/iot/Subsoiler',
+      //   name: '深松机',
+      //   component: './SystemManagement/Subsoiler',
+      //   access: 'shensong',
+      // },
       {
         path: '/iot/Classification',
         name: '外设分类',

package.json

@@ -71,7 +71,8 @@
     "react-helmet-async": "^1.2.0",
     "swiper": "^8.0.7",
     "umi": "^3.5.0",
-    "web-control": "^1.0.2"
+    "web-control": "^1.0.2",
+    "xlsx": "https://cdn.sheetjs.com/xlsx-0.19.2/xlsx-0.19.2.tgz"
   },
   "devDependencies": {
     "@ant-design/pro-cli": "^2.1.0",

src/pages/Machinery/Sensing/components/FeiFangForm.bak.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Modal, Form, Input, Select, Button } from 'antd';
+
+const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 14 } };
+const FormItem = Form.Item;
+
+export default (props) => {
+  const { onCancel, onFinish } = props;
+
+  const [form] = Form.useForm();
+
+  return (
+    <Form {...formItemLayout} onFinish={onFinish} form={form}>
+      <FormItem
+        label="设备大类"
+        name="deviceKind"
+        initialValue="feifang"
+        rules={[{ required: true, message: '请选择设备大类' }]}
+      >
+        <Select placeholder="请选择">
+          <Select.Option value="feifang">飞防</Select.Option>
+        </Select>
+      </FormItem>
+      <FormItem
+        label="设备编号"
+        name="deviceNo"
+        rules={[{ required: true, message: '请输入设备编号' }]}
+      >
+        <Input placeholder="请输入" />
+      </FormItem>
+      <FormItem label=" " colon={false}>
+        <Button type="default" onClick={onCancel}>
+          取消
+        </Button>
+        <Button type="primary" htmlType="Submit" style={{ marginLeft: '2em' }}>
+          确认
+        </Button>
+      </FormItem>
+    </Form>
+  );
+};

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

@@ -1,41 +1,130 @@
 import React from 'react';
-import { Modal, Form, Input, Select, Button } from 'antd';
+import { Upload, Spin, Collapse, Space, Typography, Button } from 'antd';
+import { InboxOutlined } from '@ant-design/icons';
+import { read, utils } from 'xlsx';
+import { addRawDevice } from '@/services/device';
 
-const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 14 } };
-const FormItem = Form.Item;
+const { Dragger } = Upload;
+const { Panel } = Collapse;
+const { Text } = Typography;
+const deviceKind = 'feifang';
 
-export default (props) => {
+export default React.forwardRef((props, ref) => {
   const { onCancel, onFinish } = props;
 
-  const [form] = Form.useForm();
+  const [loading, setLoading] = React.useState(false);
+  const [finished, setFinished] = React.useState(false);
+  const [deviceNoList, setDeviceNoList] = React.useState([]);
+  const [okList, setOkList] = React.useState([]);
+  const [failList, setFailList] = React.useState([]);
+
+  const okListRef = React.useRef();
+  okListRef.current = okList;
+  const failListRef = React.useRef();
+  failListRef.current = failList;
+
+  const loadingTip = React.useMemo(() => {
+    return `正在处理 ${okList.length + failList.length} / ${deviceNoList.length}`;
+  }, [deviceNoList, okList, failList]);
+
+  const beforeUpload = (file) => {
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      const wb = read(e.target.result);
+      // data 格式为 [{ "设备号": "xxx" }], 其中 xxx 为设备号
+      const data = utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]) || [];
+      const list = data.map((x) => x['设备号']);
+      setDeviceNoList(list || []);
+      setOkList([]);
+      setFailList([]);
+      setFinished(false);
+    };
+    reader.readAsArrayBuffer(file);
+
+    // 不上传
+    return false;
+  };
+
+  React.useEffect(() => {
+    if (!deviceNoList || !deviceNoList.length) return;
+
+    setLoading(true);
+    setOkList([]);
+    setFailList([]);
+
+    let i = 0;
+    for (let deviceNo of deviceNoList) {
+      addRawDevice({ deviceKind, deviceNo }, { showType: 0 })
+        .then(() => {
+          i += 1;
+          okListRef.current = okListRef.current.concat(deviceNo);
+          setOkList(okListRef.current);
+          setFinished(i >= deviceNoList.length);
+        })
+        .catch(() => {
+          i += 1;
+          failListRef.current = failListRef.current.concat(deviceNo);
+          setFailList(failListRef.current);
+          setFinished(i >= deviceNoList.length);
+        });
+    }
+  }, [deviceNoList]);
+
+  React.useImperativeHandle(
+    ref,
+    () => ({
+      refresh: () => {
+        setLoading(false);
+        setFinished(false);
+        setDeviceNoList([]);
+        setOkList([]);
+        setFailList([]);
+      },
+    }),
+    [],
+  );
 
   return (
-    <Form {...formItemLayout} onFinish={onFinish} form={form}>
-      <FormItem
-        label="设备大类"
-        name="deviceKind"
-        initialValue="feifang"
-        rules={[{ required: true, message: '请选择设备大类' }]}
-      >
-        <Select placeholder="请选择">
-          <Select.Option value="feifang">飞防</Select.Option>
-        </Select>
-      </FormItem>
-      <FormItem
-        label="设备编号"
-        name="deviceNo"
-        rules={[{ required: true, message: '请输入设备编号' }]}
-      >
-        <Input placeholder="请输入" />
-      </FormItem>
-      <FormItem label=" " colon={false}>
-        <Button type="default" onClick={onCancel}>
-          取消
-        </Button>
-        <Button type="primary" htmlType="Submit" style={{ marginLeft: '2em' }}>
-          确认
-        </Button>
-      </FormItem>
-    </Form>
+    <div>
+      {!finished && (
+        <Spin spinning={loading} tip={loadingTip}>
+          <Dragger accept=".xls,.xlsx" fileList={[]} beforeUpload={beforeUpload}>
+            <p className="ant-upload-drag-icon">
+              <InboxOutlined />
+            </p>
+            <p className="ant-upload-text">点击或拖拽 Excel 文件到此区域</p>
+            <p className="ant-upload-hint">
+              Excel 要求只有一列, 标题为"设备号"（不带引号）, 数据从第二行开始
+            </p>
+          </Dragger>
+        </Spin>
+      )}
+      {finished && (
+        <Space direction="vertical">
+          <Collapse collapsible="header" defaultActiveKey={['1']}>
+            <Panel header="成功设备" key="1">
+              <Typography>
+                {okList.map((x) => (
+                  <Text copyable key={x}>
+                    {x}
+                  </Text>
+                ))}
+              </Typography>
+            </Panel>
+          </Collapse>
+          <Collapse collapsible="header" defaultActiveKey={['1']}>
+            <Panel header="失败设备" key="1">
+              <Typography>
+                {failList.map((x) => (
+                  <Text copyable key={x}>
+                    {x}
+                  </Text>
+                ))}
+              </Typography>
+            </Panel>
+          </Collapse>
+        </Space>
+      )}
+    </div>
   );
-};
+});

src/pages/Machinery/Sensing/index.jsx

@@ -22,6 +22,7 @@ export default (props) => {
   const [device, setDevice] = useState();
   const listRef = useRef();
   const actRef = useRef();
+  const ffRef = useRef();
 
   const modalTitle = actRef.current === 'add' ? '新增设备' : '绑定农机';
 
@@ -132,6 +133,13 @@ export default (props) => {
       });
   };
 
+  const onHide = () => {
+    setOpen(false);
+    if (ffRef.current) {
+      ffRef.current.refresh();
+    }
+  };
+
   // 设备操作
   const onOperate = (row, act) => {
     actRef.current = act;
@@ -168,19 +176,20 @@ export default (props) => {
             同步飞防
           </Button>,
           <Button ghost key={4} type="primary" loading={syncing3} onClick={onSyncMachine}>
-            同步农机
+            绑定农机
           </Button>,
         ]}
       />
       <Modal
+        width={640}
         title={modalTitle}
         visible={open}
         maskClosable={false}
         footer={null}
-        onCancel={() => setOpen(false)}
+        onCancel={onHide}
       >
         {actRef.current === 'add' ? (
-          <FeiFangForm onCancel={() => setOpen(false)} onFinish={onAddDevice} />
+          <FeiFangForm ref={ffRef} onCancel={() => setOpen(false)} onFinish={onAddDevice} />
         ) : (
           <MaBind onCancel={() => setOpen(false)} onFinish={onBind} />
         )}

src/services/device.js

@@ -69,7 +69,8 @@ export const syncShenSong = () => request('/raw-device/sync', { method: 'put' })
  * 增加设备
  * @returns
  */
-export const addRawDevice = (data) => request('/raw-device', { method: 'POST', data });
+export const addRawDevice = (data, options) =>
+  request('/raw-device', { method: 'POST', data, ...(options || {}) });
 
 /**
  * 删除设备