feats

src/pages/Machinery/Machinery/Edit/components/BasicInfo.jsx

@@ -0,0 +1,197 @@
+import React, { useState, useEffect } from 'react';
+import { history } from 'umi';
+import { Form, Input, DatePicker, Select, Button, message } from 'antd';
+import ExtendContent from '@/components/ExtendContent';
+import { UploadImage, UploadImageList } from '@/components/Upload';
+import Money from '@/components/Money';
+import { addMachinery, updateMachinery, getMachineryDetail } from '@/services/machinery';
+import { getMachineryTypeList } from '@/services/machineryType';
+import { getRegionList } from '@/services/region';
+import { getCooperativeList } from '@/services/cooperative';
+
+const { Option } = Select;
+const FormItem = Form.Item;
+const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 14 } };
+
+const goBack = () => {
+  history.goBack();
+};
+
+export default (props) => {
+  const { id, onSuccess } = props;
+
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState(false);
+  const [imageList, setImageList] = useState([]);
+  //农机类型列表
+  const [machineryTypeList, setMachineryTypeList] = useState([]);
+  //区域列表
+  const [regionList, setRegionList] = useState([]);
+  //合作社列表
+  const [cooperativeList, setCooperativeList] = useState([]);
+
+  const onSubmit = (data) => {
+    var newData = { ...data };
+    if (data.buyDate) {
+      newData = { ...data, buyDate: data.buyDate.format('YYYY-MM-DD HH:mm:ss') };
+    }
+    setLoading(true);
+    if (id) {
+      updateMachinery(id, newData)
+        .then(() => {
+          setLoading(false);
+          message.success('数据更新成功');
+          goBack();
+        })
+        .catch((err) => {
+          setLoading(false);
+          message.error(err.message || err);
+        });
+    } else {
+      addMachinery(newData)
+        .then((res) => {
+          setLoading(false);
+          message.success('数据保存成功');
+          history.replace(`./Edit?id=${res.machineryId}`);
+        })
+        .catch((err) => {
+          setLoading(false);
+          message.error(err.message || err);
+        });
+    }
+  };
+
+  const imageInput = (image) => {
+    return {
+      uid: image.imageId,
+      url: image.url,
+    };
+  };
+
+  const imageOutput = (image) => {
+    return {
+      imageId: image?.raw?.imageId,
+      targetId: id,
+      url: image.url,
+    };
+  };
+
+  useEffect(() => {
+    getMachineryTypeList({ pageSize: 500 })
+      .then((res) => {
+        setMachineryTypeList(res.records);
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
+    getRegionList({ pageSize: 500 })
+      .then((res) => {
+        setRegionList(res.records);
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
+    getCooperativeList({ pageSize: 500 })
+      .then((res) => {
+        setCooperativeList(res.records);
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
+  }, []);
+
+  useEffect(() => {
+    if (id) {
+      //编辑时获取基本信息内容
+      getMachineryDetail(id)
+        .then((res) => {
+          form.setFieldsValue({
+            ...res,
+            buyDate: res.buyDate ? moment(res.buyDate, 'YYYY-MM-DD') : null,
+          });
+        })
+        .catch((err) => {
+          console.log(err.message);
+        });
+    }
+  }, [id]);
+
+  return (
+    <Form {...formItemLayout} onFinish={onSubmit} form={form}>
+      <FormItem label="农机名" name="name" rules={[{ required: true, message: '请输入农机名' }]}>
+        <Input placeholder="请输入农机名" style={{ width: '350px' }} />
+      </FormItem>
+      <FormItem
+        label="农机类型"
+        name="typeId"
+        rules={[{ required: true, message: '请选择农机类型' }]}
+      >
+        <Select style={{ width: '350px' }}>
+          {machineryTypeList.map((item) => (
+            <Option value={item.typeId} key={item.typeId}>
+              {item.name}
+            </Option>
+          ))}
+        </Select>
+      </FormItem>
+      <FormItem label="主图" name="thumb" rules={[{ required: true, message: '请选择主图' }]}>
+        <UploadImage />
+      </FormItem>
+      <FormItem label="农机banner图集" name="images">
+        <UploadImageList
+          value={imageList}
+          onChange={setImageList}
+          input={imageInput}
+          output={imageOutput}
+        />
+      </FormItem>
+      <FormItem label="区域" name="regionId" rules={[{ required: true, message: '请选择区域' }]}>
+        <Select style={{ width: '350px' }}>
+          {regionList.map((item) => (
+            <Option value={item.regionId} key={item.regionId}>
+              {item.name}
+            </Option>
+          ))}
+        </Select>
+      </FormItem>
+      <FormItem
+        label="归属合作社"
+        name="orgId"
+        rules={[{ required: true, message: '请选择归属合作社' }]}
+      >
+        <Select style={{ width: '350px' }}>
+          {cooperativeList.map((item) => (
+            <Option value={item.orgId} key={item.orgId}>
+              {item.name}
+            </Option>
+          ))}
+        </Select>
+      </FormItem>
+      <FormItem label="单价" name="price" rules={[{ required: true, message: '请输入价格' }]}>
+        <Money style={{ width: '350px' }} />
+      </FormItem>
+      <FormItem label="购买时间" name="buyDate">
+        <DatePicker format="YYYY-MM-DD" style={{ width: '350px' }} />
+      </FormItem>
+      <FormItem label="状态" name="status" rules={[{ required: true, message: '请选择' }]}>
+        <Select placeholder="请选择农机状态" style={{ width: '350px' }}>
+          <Option value={1}>正常</Option>
+          <Option value={0}>维修</Option>
+        </Select>
+      </FormItem>
+      {id && (
+        <FormItem label="详细信息" colon={false}>
+          <ExtendContent targetType="machinery" targetId={id} onCancel={goBack} />
+        </FormItem>
+      )}
+      <FormItem label=" " colon={false}>
+        <Button type="default" onClick={goBack}>
+          返回
+        </Button>
+        <Button type="primary" loading={loading} htmlType="submit" style={{ marginLeft: '4em' }}>
+          保存
+        </Button>
+      </FormItem>
+    </Form>
+  );
+};

src/pages/Machinery/Machinery/Edit/components/DeviceInfo.jsx

@@ -0,0 +1,132 @@
+import React, { useState, useEffect } from 'react';
+import { history } from 'umi';
+import { Form, Drawer, Select, InputNumber, message, Button } from 'antd';
+import { getDeviceDetail, addDevice } from '@/services/device';
+import DeviceList from './DeviceList';
+import { useMemo } from 'react';
+
+const { Option } = Select;
+const FormItem = Form.Item;
+const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 14 } };
+
+const goBack = () => {
+  history.goBack();
+};
+
+export default (props) => {
+  const { machineryId } = props;
+
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState(false);
+  const [visible, setVisible] = useState(false);
+  const [deviceDetail, setDeviceDetail] = useState();
+  const [hatcId, setHatcId] = useState();
+
+  const onSubmit = (data) => {
+    if (!deviceDetail || !deviceDetail.deviceNo) {
+      message.error('请先绑定设备');
+      return;
+    }
+
+    const apiConfig = JSON.stringify({
+      ...data,
+      deviceId: hatcId,
+    });
+
+    // 表单的提交, 实际上是把 form 内容 + 其余字段 融合一起提交
+    setLoading(true);
+    addDevice({ ...deviceDetail, machineryId, apiConfig })
+      .then((res) => {
+        message.success('保存成功！');
+        setLoading(false);
+        goBack();
+      })
+      .catch((err) => {
+        setLoading(false);
+        console.log(err.message);
+      });
+  };
+
+  const handleCheck = (terminalId, hatcDevice) => {
+    setHatcId(hatcDevice.deviceId);
+    setDeviceDetail({
+      ...(deviceDetail || {}),
+      deviceNo: terminalId,
+      deviceType: hatcDevice.productKey,
+    });
+    setVisible(false);
+  };
+
+  useEffect(() => {
+    if (machineryId) {
+      //获取设备信息内容
+      getDeviceDetail(machineryId).then((res) => {
+        if (!res) return;
+
+        setDeviceDetail(res);
+        const apiConfig = JSON.parse(res.apiConfig) || {};
+
+        // 表单内容只是整个数据的一个 JSON 字段
+        form.setFieldsValue({
+          netType: apiConfig.netType,
+          channel: apiConfig.channel,
+        });
+      });
+    }
+  }, [machineryId, form]);
+
+  const deviceName = useMemo(() => {
+    if (!deviceDetail) return '未绑定';
+
+    return `${deviceDetail.deviceType}-${deviceDetail.deviceNo}`;
+  }, [deviceDetail]);
+
+  return (
+    <>
+      <Form {...formItemLayout} onFinish={onSubmit} form={form}>
+        <FormItem label="设备">
+          <Button type="link" onClick={() => setVisible(true)}>
+            {deviceName}
+          </Button>
+        </FormItem>
+        <FormItem
+          label="通道号"
+          name="channel"
+          rules={[{ required: true, message: '请输入通道号' }]}
+        >
+          <InputNumber min={1} placeholder="请输入通道号" style={{ width: '350px' }} />
+        </FormItem>
+        <FormItem
+          label="网络类型"
+          name="netType"
+          rules={[{ required: true, message: '请选择网络类型' }]}
+        >
+          <Select placeholder="请选择网络类型" style={{ width: '350px' }}>
+            <Option value={0}>内网</Option>
+            <Option value={1}>电信</Option>
+            <Option value={2}>移动</Option>
+            <Option value={3}>联通</Option>
+          </Select>
+        </FormItem>
+        <FormItem label=" " colon={false}>
+          <Button type="default" onClick={goBack}>
+            返回
+          </Button>
+          <Button type="primary" loading={loading} htmlType="submit" style={{ marginLeft: '4em' }}>
+            保存
+          </Button>
+        </FormItem>
+      </Form>
+      <Drawer
+        title="设备列表"
+        width={500}
+        closable={false}
+        onClose={() => setVisible(false)}
+        visible={visible}
+        destroyOnClose
+      >
+        <DeviceList value={deviceDetail && deviceDetail.deviceNo} onChange={handleCheck} />
+      </Drawer>
+    </>
+  );
+};

src/pages/Machinery/Machinery/Edit/components/DeviceList.jsx

@@ -0,0 +1,113 @@
+import { useState, useEffect } from 'react';
+import { Button, Card, Descriptions, Input, List } from 'antd';
+import { getHatcDeviceList } from '@/services/device';
+import selectedImg from '@/assets/selectedImg.png';
+
+const { Search } = Input;
+
+// 列表是海康设备
+// props 传过来的是映射ID
+
+export default (props) => {
+  const { value, onChange } = props;
+
+  const [loading, setLoading] = useState(false);
+  const [hatcDeviceList, setHatcDeviceList] = useState([]); // 所有数据
+  const [list, setList] = useState([]); // 页面展示数据
+  const [checked, setChecked] = useState();
+
+  // 搜索
+  const onSearch = (val) => {
+    if (val == '' || val === undefined || val === null) {
+      setList(hatcDeviceList);
+    } else {
+      setList(hatcDeviceList.filter((x) => x.terminalId.toLowerCase().includes(val.toLowerCase())));
+    }
+  };
+
+  //选中设备
+  const handleSelect = (item) => {
+    setChecked(item);
+  };
+
+  // 提交
+  const handleSubmit = () => {
+    onChange(checked.terminalId, checked);
+  };
+
+  // 过滤列表
+  useEffect(() => {
+    setLoading(true);
+    getHatcDeviceList({ pageSize: 500 })
+      .then((res) => {
+        setHatcDeviceList(res.records);
+        setList(res.records);
+        setLoading(false);
+      })
+      .catch(() => {
+        setLoading(false);
+      });
+  }, []);
+
+  useEffect(() => {
+    if (!hatcDeviceList || !hatcDeviceList.length) return;
+    if (!value) return;
+
+    if (!checked || value !== checked.terminalId) {
+      const target = hatcDeviceList.filter((x) => x.terminalId === value)[0];
+      setChecked(target);
+    }
+  }, [value, checked, hatcDeviceList]);
+
+  return (
+    <div style={{ display: 'flex', height: '100%', flexDirection: 'column' }}>
+      <Search
+        placeholder="请输入终端ID"
+        allowClear
+        enterButton="搜索"
+        size="middle"
+        onSearch={onSearch}
+        style={{ padding: '24px' }}
+      />
+      <List
+        split={false}
+        style={{ padding: '12px 0', flex: 1, overflowY: 'auto', background: 'rgb(240,242,245)' }}
+      >
+        {list.map((item) => (
+          <List.Item key={item.deviceId} onClick={() => handleSelect(item)}>
+            <Card className="listCard" hoverable>
+              <Descriptions
+                labelStyle={{ width: '72px', display: 'inline-block', textAlign: 'end' }}
+              >
+                <Descriptions.Item span={3} label="型号名称">
+                  {item.modelName}
+                </Descriptions.Item>
+                <Descriptions.Item span={3} label="协议">
+                  {item.protocol}
+                </Descriptions.Item>
+                <Descriptions.Item span={3} label="终端ID">
+                  {item.terminalId}
+                </Descriptions.Item>
+                <Descriptions.Item span={3} label="通道列表">
+                  {item.deviceChannelList}
+                </Descriptions.Item>
+              </Descriptions>
+              {checked && checked.deviceId === item.deviceId && <img src={selectedImg} />}
+            </Card>
+          </List.Item>
+        ))}
+      </List>
+      <div style={{ padding: '24px' }}>
+        <Button
+          type="primary"
+          style={{ float: 'right' }}
+          loading={loading}
+          onClick={handleSubmit}
+          disabled={!checked}
+        >
+          确定
+        </Button>
+      </div>
+    </div>
+  );
+};

src/pages/Machinery/Machinery/Edit/index.jsx

@@ -1,386 +1,21 @@
-import { useState, useEffect } from 'react';
-import { history } from 'umi';
-import { Form, Input, Drawer, DatePicker, Select, InputNumber, message, Button, List, Card, Descriptions } from 'antd';
 import ProCard from '@ant-design/pro-card';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
-import moment from 'moment';
-import ExtendContent from '@/components/ExtendContent';
-import { UploadImage, UploadImageList } from '@/components/Upload';
-import Money from '@/components/Money';
-import { addMachinery, updateMachinery, getMachineryDetail } from '@/services/machinery';
-import { getMachineryTypeList } from '@/services/machineryType';
-import { getRegionList } from '@/services/region';
-import { getDeviceList, getdeviceDetail, getTerminalDeviceList, addDevice } from '@/services/device';
-import { getCooperativeList } from '@/services/cooperative';
-import selectedImg from '@/assets/selectedImg.png'
-import './style.less'
+import BasicInfo from './components/BasicInfo';
+import DeviceInfo from './components/DeviceInfo';
+import './style.less';
 
-const { Option } = Select;
-const { Search } = Input;
-const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 14 } };
-
-const goBack = () => {
-  history.goBack();
-};
-const FormItem = Form.Item;
 export default (props) => {
   const { location } = props;
   const { id } = location.query;
-  const [form] = Form.useForm();
-  const [loading, setLoading] = useState(false);
-  const [imageList, setImageList] = useState([]);
-  //农机类型列表
-  const [machineryTypeList, setMachineryTypeList] = useState([]);
-  //区域列表
-  const [regionList, setRegionList] = useState([]);
-  //合作社列表
-  const [cooperativeList, setCooperativeList] = useState([]);
-
-  const Submit = (data) => {
-    var newData = { ...data }
-    if (data.buyDate) {
-      newData = { ...data, buyDate: data.buyDate.format('YYYY-MM-DD HH:mm:ss') };
-    }
-    setLoading(true);
-    if (id) {
-      updateMachinery(id, newData)
-        .then(() => {
-          setLoading(false);
-          message.success('数据更新成功');
-          goBack();
-        })
-        .catch((err) => {
-          setLoading(false);
-          message.error(err.message || err);
-        });
-    } else {
-      addMachinery(newData)
-        .then((res) => {
-          setLoading(false);
-          message.success('数据保存成功');
-          history.replace(`./Edit?id=${res.machineryId}`)
-        })
-        .catch((err) => {
-          setLoading(false);
-          message.error(err.message || err);
-        });
-    }
-  };
-
-  const imageInput = (image) => {
-    return {
-      uid: image.imageId,
-      url: image.url,
-    };
-  };
-
-  const imageOutput = (image) => {
-    return {
-      imageId: image?.raw?.imageId,
-      targetId: id,
-      url: image.url,
-    };
-  };
-
-
-  //设备信息
-  const [deviceForm] = Form.useForm();
-  const [visible, setVisible] = useState(false);
-  const [terminalId, setTerminalId] = useState();
-  //设备列表
-  const [deviceList, setDeviceList] = useState([]);
-  const [device, setDevice] = useState();
-  const [bind, setBind] = useState(false);
-  const [deviceLoading, setDeviceLoading] = useState(false);
-  const [deviceDetail, setDeviceDetail] = useState();
-
-  //弹出设备列表抽屉
-  const changeCamera = () => {
-    if (device != null) {
-      getTerminalDeviceList(device.deviceId).then((res) => {
-        setDeviceList([res]);
-        setVisible(true);
-      })
-    } else {
-      setVisible(true);
-    }
-
-  }
-  const handleClose = () => {
-    setVisible(false);
-  }
-  const onSearch = (val) => {
-    if (val == '') {
-      getDeviceList({ pageSize: 500 }).then((res) => {
-        setDeviceList(res.records);
-      })
-    } else {
-      setTerminalId(val)
-    }
-  }
-  //选中设备
-  const handleSelect = (item) => {
-    setDevice(item);
-  }
-  const handleOk = () => {
-    if (device != null) {
-      setBind(true)
-    }
-    handleClose();
-  }
-  const submitDevice = (data) => {
-    if (!bind) {
-      message.info('请绑定摄像头');
-      return;
-    }
-    let obj = {
-      deviceId: device.deviceId,
-      channel: data.channel,
-      netType: data.netType
-    }
-    let config = JSON.stringify(obj);
-    setDeviceLoading(true);
-    addDevice({ ...deviceDetail, machineryId: id, apiConfig: config }).then((res) => {
-      message.success('保存成功！');
-      setDeviceLoading(false);
-      goBack();
-    }).catch((err) => {
-      setDeviceLoading(false);
-      console.log(err.message);
-    })
-  }
-  useEffect(() => {
-    getDeviceList({ terminalId: terminalId, pageSize: 500 }).then((res) => {
-      setDeviceList(res.records);
-    })
-  }, [terminalId])
-
-  useEffect(() => {
-    getMachineryTypeList({ pageSize: 500 }).then((res) => {
-      setMachineryTypeList(res.records);
-    }).catch((err) => {
-      console.log(err.message)
-    });
-    getRegionList({ pageSize: 500 }).then((res) => {
-      setRegionList(res.records);
-    }).catch((err) => {
-      console.log(err.message)
-    });
-    getCooperativeList({ pageSize: 500 }).then((res) => {
-      setCooperativeList(res.records);
-    }).catch((err) => {
-      console.log(err.message)
-    });
-  }, [])
-
-
-  useEffect(() => {
-    if (id) {
-      //编辑时获取基本信息内容
-      getMachineryDetail(id).then((res) => {
-        form.setFieldsValue({ ...res, buyDate: res.buyDate ? moment(res.buyDate, 'YYYY-MM-DD') : null });
-      }).catch((err) => {
-        console.log(err.message)
-      });
-      //获取设备信息内容
-      getdeviceDetail(id).then((res) => {
-        setDeviceDetail(res);
-        if (res) {
-          //json字符串转普通对象
-          let confit = JSON.parse(res.apiConfig)
-          deviceForm.setFieldsValue(confit);
-          if (res && res.deviceId != null) {
-            //获取绑定设备详情
-            getTerminalDeviceList(confit.deviceId).then((res) => {
-              setDevice(res);
-              setBind(true)
-            })
-          }
-        }
-      })
-    }
-  }, [id]);
 
   return (
     <PageHeaderWrapper>
       <ProCard tabs={{ type: 'card' }} style={{ minHeight: '700px' }}>
         <ProCard.TabPane key={1} tab="基本信息">
-          <Form {...formItemLayout} onFinish={Submit} form={form}>
-            <FormItem
-              label="农机名"
-              name="name"
-              rules={[{ required: true, message: '请输入农机名' }]}
-            >
-              <Input placeholder="请输入农机名" style={{ width: '350px' }} />
-            </FormItem>
-            <FormItem
-              label="农机类型"
-              name="typeId"
-              rules={[{ required: true, message: '请选择农机类型' }]}
-            >
-              <Select style={{ width: '350px' }}>
-                {machineryTypeList.map((item) => (
-                  <Option value={item.typeId} key={item.typeId}>
-                    {item.name}
-                  </Option>
-                ))}
-              </Select>
-            </FormItem>
-            <FormItem label="主图" name="thumb" rules={[{ required: true, message: '请选择主图' }]}>
-              <UploadImage />
-            </FormItem>
-            <FormItem label="农机banner图集" name="images">
-              <UploadImageList
-                value={imageList}
-                onChange={setImageList}
-                input={imageInput}
-                output={imageOutput}
-              />
-            </FormItem>
-            <FormItem
-              label="区域"
-              name="regionId"
-              rules={[{ required: true, message: '请选择区域' }]}
-            >
-              <Select style={{ width: '350px' }}>
-                {regionList.map((item) => (
-                  <Option value={item.regionId} key={item.regionId}>
-                    {item.name}
-                  </Option>
-                ))}
-              </Select>
-            </FormItem>
-            <FormItem
-              label="归属合作社"
-              name="orgId"
-              rules={[{ required: true, message: '请选择归属合作社' }]}
-            >
-              <Select style={{ width: '350px' }}>
-                {cooperativeList.map((item) => (
-                  <Option value={item.orgId} key={item.orgId}>
-                    {item.name}
-                  </Option>
-                ))}
-              </Select>
-            </FormItem>
-            <FormItem label="单价" name="price" rules={[{ required: true, message: '请输入价格' }]}>
-              <Money style={{ width: '350px' }} />
-            </FormItem>
-            <FormItem label="购买时间" name="buyDate">
-              <DatePicker format="YYYY-MM-DD" style={{ width: '350px' }} />
-            </FormItem>
-            <FormItem label="状态" name="status" rules={[{ required: true, message: '请选择' }]}>
-              <Select placeholder="请选择农机状态" style={{ width: '350px' }}>
-                <Option value={1}>正常</Option>
-                <Option value={0}>维修</Option>
-              </Select>
-            </FormItem>
-            {id && (
-              <FormItem label="详细信息" colon={false}>
-                <ExtendContent targetType="machinery" targetId={id} onCancel={goBack} />
-              </FormItem>
-            )}
-            <FormItem label=" " colon={false}>
-              <Button type="default" onClick={goBack}>
-                返回
-              </Button>
-              <Button
-                type="primary"
-                loading={loading}
-                htmlType="submit"
-                style={{ marginLeft: '4em' }}
-              >
-                保存
-              </Button>
-            </FormItem>
-          </Form>
+          <BasicInfo id={id} />
         </ProCard.TabPane>
         <ProCard.TabPane key={2} disabled={!id} tab="设备信息">
-          <Form {...formItemLayout} onFinish={submitDevice} form={deviceForm}>
-            <FormItem label='摄像头'  >
-              <Button type='link' onClick={changeCamera}>{bind ? '已绑定' : '未绑定'}</Button>
-            </FormItem>
-            <FormItem
-              label="通道号"
-              name='channel'
-              rules={[{ required: true, message: '请输入通道号' }]}
-            >
-              <InputNumber min={1} placeholder="请输入通道号" style={{ width: '350px' }} />
-            </FormItem>
-            <FormItem
-              label="网络类型"
-              name='netType'
-              rules={[{ required: true, message: '请选择网络类型' }]}
-            >
-              <Select placeholder="请选择网络类型" style={{ width: '350px' }}>
-                <Option value={0}>内网</Option>
-                <Option value={1}>电信</Option>
-                <Option value={2}>移动</Option>
-                <Option value={3}>联通</Option>
-              </Select>
-            </FormItem>
-            <FormItem label=" " colon={false}>
-              <Button type="default" onClick={goBack}>
-                返回
-              </Button>
-              <Button
-                type="primary"
-                loading={deviceLoading}
-                htmlType="submit"
-                style={{ marginLeft: '4em' }}
-              >
-                保存
-              </Button>
-            </FormItem>
-          </Form>
-          <Drawer
-            title="摄像头列表"
-            width={500}
-            closable={false}
-            onClose={handleClose}
-            visible={visible}
-          >
-            <div style={{ display: 'flex', height: '100%', flexDirection: 'column' }}>
-              <Search
-                placeholder="请输入终端ID"
-                allowClear
-                enterButton="搜索"
-                size="middle"
-                onSearch={onSearch}
-                style={{ padding: '24px' }}
-              />
-              <List split={false} style={{ padding: '12px 0', flex: 1, overflowY: 'auto', background: 'rgb(240,242,245)' }}>
-                {
-                  deviceList.map(item =>
-                    <List.Item key={item.deviceId} onClick={() => handleSelect(item)}>
-                      <Card className='listCard' hoverable>
-                        <Descriptions labelStyle={{ width: '72px', display: 'inline-block', textAlign: 'end' }} >
-                          <Descriptions.Item span={3} label='型号名称'>{item.modelName}</Descriptions.Item>
-                          <Descriptions.Item span={3} label='协议'>{item.protocol}</Descriptions.Item>
-                          <Descriptions.Item span={3} label='终端ID'>{item.terminalId}</Descriptions.Item>
-                          <Descriptions.Item span={3} label='通道列表'>{item.deviceChannelList}</Descriptions.Item>
-                        </Descriptions>
-                        {
-                          device && item.deviceId == device.deviceId && <img src={selectedImg} />
-                        }
-                      </Card>
-                    </List.Item>
-                  )
-                }
-
-              </List>
-              <div style={{ padding: '24px' }}>
-                <Button
-                  type="primary"
-                  style={{ float: 'right' }}
-                  loading={loading}
-                  onClick={handleOk}
-                >
-                  确定
-                </Button>
-              </div>
-            </div>
-          </Drawer>
+          <DeviceInfo machineryId={id} />
         </ProCard.TabPane>
       </ProCard>
     </PageHeaderWrapper>

src/services/device.js

@@ -5,7 +5,7 @@ import request from '@/utils/request';
  * @param {*} params
  * @returns
  */
-export const getDeviceList = (params) => request('/hatc-device', { params });
+export const getHatcDeviceList = (params) => request('/hatc-device', { params });
 
 /**
  * 通过设备号查询相关设备列表  选好了点击绑定时根据当前选择的设备id查询
@@ -21,7 +21,7 @@ export const getTerminalDeviceList = (id) => request(`/hatc-device/${id}`);
  * @param {*} params
  * @returns
  */
-export const getdeviceDetail = (id) => request(`/machinery/${id}/device`);
+export const getDeviceDetail = (id) => request(`/machinery/${id}/device`);
 
 //  新增修改设备信息
 /**