diff --git a/src/pages/Device/DeviceForm.tsx b/src/pages/Device/DeviceForm.tsx
new file mode 100644
index 0000000..8c4fd08
--- /dev/null
+++ b/src/pages/Device/DeviceForm.tsx
@@ -0,0 +1,139 @@
+import { Form, Input, Modal, Spin } from "antd"
+import React, { useEffect, useState } from "react"
+import { getDeviceById } from "./service";
+
+import { SnowflakeID } from "@/services/untilService";
+
+import { trim } from "@/utils/CommonUtils";
+
+interface DeviceFormProps {
+  modalVisible: boolean;
+  titleName: string;
+  onCancel: () => void;
+  type: string;
+  tpId: string;
+  deviceId: string;
+
+}
+
+const layout = {
+  labelCol: { span: 7 },
+  wrapperCol: { span: 10 },
+};
+const DeviceForm: React.FC<DeviceFormProps> = (props) => {
+
+  const { titleName, modalVisible, onCancel, type, tpId, deviceId } = props;
+  const [spinning, setSping] = useState<boolean>();//加载遮罩
+  const [editInformation, setEditInformation] = useState<boolean>(false);//是否可编
+  const [form] = Form.useForm();
+
+
+
+  useEffect(() => {
+    SnowflakeID().then(res => {
+      Int();
+    });
+    form.resetFields();//清除form中数据
+  }, [type, deviceId]);
+  const Int = () => {
+
+    setSping(true);
+    if (type == "new") {//==========================================================新建
+
+      setSping(false);
+      setEditInformation(false);//可编辑
+    
+    } else if (type == "edit") {//=========================================================修改
+
+       
+      getDeviceById(deviceId).then(res => {
+          if (res.code == 200) {
+            const data = res.data;
+            let defPak = [];
+            for (const item of data.sections) {
+              defPak.push(item.bsId);
+            }
+            form.setFieldsValue({
+              "documentName": data.documentName,
+              "documentSetId": data.documentSetId,
+              "sectionIds": defPak,
+            });
+          
+            setSping(false);
+            setEditInformation(false);//可编辑
+
+          }
+        });
+
+
+    } else if (type == "read") {//=========================================================查看
+      getDeviceById(deviceId).then(res => {
+        if (res.code == 200) {
+          const data = res.data;
+          let thisData1 = [];
+          let defPak = [];
+          for (const item of data.sections) {
+            thisData1.push({ "label": item.bsName, "value": item.bsId })
+            defPak.push(item.bsId);
+          }
+          
+          form.setFieldsValue({
+            "documentName": data.documentName,
+            "documentSetId": data.documentSetId,
+            "sectionIds": defPak,
+          })
+          
+          setSping(false);
+          setEditInformation(true)
+
+        }
+      });
+    }
+  }
+
+
+
+  // @ts-ignore
+  return (
+    <Modal
+      mask={true}
+      destroyOnClose
+      title={titleName}
+      visible={modalVisible}
+      onCancel={() => onCancel()}
+      className="返回"
+      width={"60%"}
+      /*style={{top: "2%", height: "96%", overflowY: "auto"}}
+      bodyStyle={{paddingTop: "16px"}}*/
+      centered
+
+    >
+      <Spin spinning={spinning}>
+        <Form
+          {...layout}
+          name="basic"
+          form={form}
+        >
+          <Form.Item
+            label="文件名称"
+            name="documentName"
+            rules={[
+              {
+                required: true,
+                message: '当前项不可为空',
+              },
+            ]}
+            normalize={(value) => trim(value)}
+          >
+            <Input maxLength={200} readOnly={editInformation} />
+          </Form.Item>
+
+                   
+        </Form>
+        
+      </Spin>
+    </Modal>
+
+  )
+}
+export default DeviceForm
diff --git a/src/pages/Device/index.tsx b/src/pages/Device/index.tsx
index 06076d1..5ddf0e8 100644
--- a/src/pages/Device/index.tsx
+++ b/src/pages/Device/index.tsx
@@ -1,10 +1,11 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { Button, Tabs, Tree} from 'antd';
+import { Button, Spin, Tabs, Tree} from 'antd';
 import ProTable, { ActionType } from '@ant-design/pro-table';
 import { deviceList, getplaceareaList, roomList } from './service';
 import '@/assets/ld_style.less';
 import { getURLInformation, isNotEmpty } from '@/utils/CommonUtils';
 import ProCard from "@ant-design/pro-card";
+import DeviceForm from './DeviceForm';
 
 
 const deviceTypeEnum = {
@@ -24,6 +25,11 @@ const Index: React.FC<{}> = () => {
   const checkRelationRef = useRef<ActionType>(); //操作数据后刷新列表
   const [treeData, setTreeData] = useState<any>();
   const [treeId, setTreeId] = useState<any>();
+  const [updateVisible, setUpdateVisible] = useState<boolean>(false)
+  const [type, setType] = useState<any>();// 状态 编辑or 查看
+  const [deviceId, setDeviceId] = useState<any>("");//设备id
+  const [spin, spinSet] = useState<boolean>(false);//加载遮罩
+  const [updateChange, setUpdateChange] = useState<string>('')
 
   /*拉取数据*/
   useEffect(() => {
@@ -53,36 +59,36 @@ const Index: React.FC<{}> = () => {
     })
   }, []);
 
+  const toAdd = async (props?: any) => {
+    spinSet(true);
+    setUpdateChange('新增设备');
+    setType("new");
+    setUpdateVisible(true);
+
+  }
+  const toEdit = (props: any) => {
+    setUpdateChange('修改设备');
+    setDeviceId(props.id)
+    setType("edit");
+    setUpdateVisible(true);
+  }
+
+  const toRead = (props: any) => {
+    setUpdateChange('查看设备');
+    setDeviceId(props.id)
+    setType("read");
+    setUpdateVisible(true);
+
+  }
   /**
    *  设备管理
    * @param record
    */
-  const cancel = async (record: any) => {};
+
   const current = getURLInformation('current');
   //列表页loading
   const [spinLoading, setSpinLoading] = useState<boolean>(false);
-  //新建应答格式
-  const toCreate = async () => {
-    // const id = getProId();
-    // const param = {
-    //   tpId: id,
-    //   roomType: getURLInformation('roomType'),
-    // };
-    // await getSectionList(param).then((res) => {
-    //   if ((res.code = 200)) {
-    //     if (res.data.length == 0) {
-    //       message.info(`当前项目无可选${sectionName}，无法新增`);
-    //     } else {
-    //       setSectionList(res.data);
-    //       setCreateVisible(true);
-    //     }
-    //   }
-    // });
-  };
-  //编辑应答格式
-  const toEdit = (values: any, param: any) => {
-    
-  };
+
   const onSelect = (selectedKeys: any, info: any) => {
     selectedKeys.length == 0 ? setTreeId(null) : setTreeId(selectedKeys[0])
 
@@ -153,7 +159,7 @@ const Index: React.FC<{}> = () => {
       render: (text: any, record: any) => {
         return (
           <>
-            <Button type="text" onClick={() => {}} danger>
+            <Button type="text" onClick={() => {toEdit(record.id)}} danger>
               编辑
             </Button>
             <Button type="text" onClick={() => {}} danger>
@@ -166,7 +172,8 @@ const Index: React.FC<{}> = () => {
   ];
   
   return (
-    <>
+    <div style={{ padding: '0px 24px' }}>
+      <Spin spinning={spin}>
     <ProCard  split="vertical" bordered headerBordered>
         <ProCard colSpan="300px">
             {treeData == undefined ? null : (
@@ -230,7 +237,7 @@ const Index: React.FC<{}> = () => {
                       >
                         {searchConfig?.searchText}
                       </Button>,
-                       <Button key="toCreate" onClick={() => toCreate()}>
+                       <Button key="toCreate" onClick={() => toAdd()}>
                        新建
                      </Button>,
                     ];
@@ -245,7 +252,14 @@ const Index: React.FC<{}> = () => {
               />
       </ProCard>
     </ProCard>
-    </>
+    {updateVisible ? (
+              <DeviceForm key={Math.random()} titleName={updateChange}
+          type={type} deviceId={deviceId} onCancel={() => setUpdateVisible(false)}
+          modalVisible={updateVisible} tpId={''} />
+            ) : null}
+    </Spin>
+    </div>
+            
   );
 };
 export default Index
diff --git a/src/pages/Device/service.ts b/src/pages/Device/service.ts
index 04d1c19..b88f07f 100644
--- a/src/pages/Device/service.ts
+++ b/src/pages/Device/service.ts
@@ -32,3 +32,10 @@ export async function getplaceareaList() {
     params: {}
   });
 }
+
+export async function getDeviceById(id: any) { 
+  return request('/v1/elec/eval/placearea/list/'+`${id}`, {
+    method: 'get',
+    params: {}
+  });
+}