.

src/pages/Machinery/Machinery/edit.jsx

@@ -1,17 +1,22 @@
 import { useState, useEffect } from 'react';
-import { Form, Input, Card, DatePicker, Select, InputNumber, message, Button } from 'antd';
 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 moment from 'moment';
+import selectedImg from '@/assets/selectedImg.png'
+import './style.less'
 
 const { Option } = Select;
+const { Search } = Input;
 const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 14 } };
 
 const goBack = () => {
@@ -37,7 +42,6 @@ export default (props) => {
       newData = { ...data, buyDate: data.buyDate.format('YYYY-MM-DD HH:mm:ss') };
     }
     setLoading(true);
-
     if (id) {
       updateMachinery(id, newData)
         .then(() => {
@@ -63,7 +67,6 @@ export default (props) => {
     }
   };
 
-  const onDateChange = () => { };
   const imageInput = (image) => {
     return {
       uid: image.imageId,
@@ -78,6 +81,64 @@ export default (props) => {
       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);
+  }
+  const handleClose = () => {
+    setVisible(false);
+  }
+  const onSearch = (val) => { setTerminalId(val) }
+  //选中设备
+  const handleSelect = (item) => {
+    setDevice(item);
+  }
+  const handleOk = () => {
+    if (device != null) {
+      setBind(true)
+    }
+    handleClose();
+  }
+  const submitDevice = (data) => {
+    if (!bind) {
+      message.info('请绑定摄像头');
+      return;
+    }
+    let config = `{'deviceId':${device.deviceId},'channel':${data.channel},'netType':${data.netType}}`;
+    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: 999 }).then((res) => {
       setMachineryTypeList(res.records);
@@ -94,19 +155,39 @@ export default (props) => {
     }).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) {
+          //eval('(' + res.apiConfig + ')') json字符串转普通对象
+          deviceForm.setFieldsValue(eval('(' + res.apiConfig + ')'));
+          if (res && res.deviceId != null) {
+            //获取绑定设备详情
+            getTerminalDeviceList(eval('(' + res.apiConfig + ')').deviceId).then((res) => {
+              setDevice(res);
+              setBind(true)
+            })
+          }
+        }
+      })
     }
   }, [id]);
 
   return (
-    <Card>
-      <ProCard tabs={{ type: 'card' }}>
-        <ProCard.TabPane key={1} tab="农机编辑">
+    <PageHeaderWrapper>
+      <ProCard tabs={{ type: 'card' }} style={{ minHeight: '700px' }}>
+        <ProCard.TabPane key={1} tab="基本信息">
           <Form {...formItemLayout} onFinish={Submit} form={form}>
             <FormItem
               label="农机名"
@@ -169,7 +250,7 @@ export default (props) => {
               <Money style={{ width: '350px' }} />
             </FormItem>
             <FormItem label="购买时间" name="buyDate">
-              <DatePicker format="YYYY-MM-DD" onChange={onDateChange} style={{ width: '350px' }} />
+              <DatePicker format="YYYY-MM-DD" style={{ width: '350px' }} />
             </FormItem>
             <FormItem label="状态" name="status" rules={[{ required: true, message: '请选择' }]}>
               <Select placeholder="请选择农机状态" style={{ width: '350px' }}>
@@ -197,7 +278,93 @@ export default (props) => {
             </FormItem>
           </Form>
         </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}
+              />
+              <List split={false} style={{ margin: '16px 0', flex: 1, overflowY: 'auto' }}>
+                {
+                  deviceList.map(item =>
+                    <List.Item key={item.deviceId} onClick={() => handleSelect(item)}>
+                      <Card className='listCard'>
+                        <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>
+                <Button
+                  type="primary"
+                  style={{ float: 'right' }}
+                  loading={loading}
+                  onClick={handleOk}
+                >
+                  确定
+                </Button>
+              </div>
+            </div>
+          </Drawer>
+        </ProCard.TabPane>
       </ProCard>
-    </Card>
+    </PageHeaderWrapper>
   );
 };

src/pages/Machinery/Machinery/style.less

@@ -0,0 +1,13 @@
+.listCard{
+  position: relative;
+  margin-right: 24px;
+  width: 100%;
+  img{
+    position: absolute;
+    right: -11px;
+    top: 16px;
+  }
+}
+.listCard:hover{
+  background-color: rgb(250, 250, 250);
+}

src/services/device.js

@@ -0,0 +1,32 @@
+import request from '@/utils/request';
+
+/**
+ * 设备列表
+ * @param {*} params
+ * @returns
+ */
+export const getDeviceList = (params) => request('/hatc-device', { params });
+
+/**
+ * 通过设备号查询相关设备列表  选好了点击绑定时根据当前选择的设备id查询
+ * 同终端列表
+ * @param {*} params
+ * @returns
+ */
+export const getTerminalDeviceList = (id) => request(`/hatc-device/${id}`);
+
+/**
+ * 设备相关信息
+ * 查询农机Id详情
+ * @param {*} params
+ * @returns
+ */
+export const getdeviceDetail = (id) => request(`/machinery/${id}/device`);
+
+//  新增修改设备信息
+/**
+ * 新增设备信息
+ * @param {*} data
+ * @returns
+ */
+export const addDevice = (data) => request('/device', { method: 'post', data });