diff --git a/src/pages/SystemMgm/AreaManage/loadable.jsx b/src/pages/SystemMgm/AreaManage/loadable.jsx
index 04ec20f..f5eb16f 100644
--- a/src/pages/SystemMgm/AreaManage/loadable.jsx
+++ b/src/pages/SystemMgm/AreaManage/loadable.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect } from "react";
 import {  message, Pagination, Table, Input, Modal, Tree, Button } from "antd";
-import { MinusCircleOutlined, DeleteOutlined, EditOutlined, PlusCircleOutlined } from '@ant-design/icons';
+import { DeleteOutlined, EditOutlined, PlusCircleOutlined } from '@ant-design/icons';
 import ajax from "@/services"
 import { BaseMap } from "@/components"
 import ModalAreaAdd from "./ModalAreaAdd";
diff --git a/src/pages/SystemMgm/OrgnizationMgm/index.scss b/src/pages/SystemMgm/OrgnizationMgm/index.scss
index 1838f71..e9a79d7 100644
--- a/src/pages/SystemMgm/OrgnizationMgm/index.scss
+++ b/src/pages/SystemMgm/OrgnizationMgm/index.scss
@@ -3,3 +3,73 @@ $color-container-bg : var(--color-container-bg);
 $color-user-list-bg : var(--color-user-list-bg);
 $color-text : var(--color-text);
 $color-primary : var(--color-primary);
+
+.orgnization-container {
+    display: flex;
+    padding: 20px;
+    height: 100%;
+    .org-tree-container {
+        width: 250px;
+        margin-right: 20px;
+        .ant-tree {
+            .ant-tree-title {
+              .label-text {
+                margin-right: 20px;
+              }
+              .label-icon {
+                margin-right: 5px;
+              }
+            }
+        }
+    }
+    .org-content {
+      flex: 1;
+      height: 100%;
+      padding: 0 10px;
+      background: var(--color-user-list-bg);
+      .ant-tabs .ant-tabs-nav-wrap .ant-tabs-nav-list .ant-tabs-tab {
+          width: unset !important;
+      }
+      .base-form-container {
+        margin-top: 40px;
+        input {
+          width: 100%;
+          border-color: var(--color-border);
+          background-color: #393f4f;
+          border-radius: 4px;
+          color: var(--color-search-list-item-value);
+          &.ant-input-disabled {
+            background-color: hsla(0,0%,100%,.08);
+          }
+        }
+        .ant-select-disabled .ant-select-selector, .ant-select-disabled .ant-select-arrow .anticon {
+          background-color: hsla(0,0%,100%,.08) !important;
+        }
+        .ant-select:not(.ant-select-customize-input) .ant-select-selector{
+          background-color: #393f4f;
+          border: 1px solid var(--color-border);
+        }
+        .ant-select-arrow .anticon{
+          background-color: #393f4f !important;
+        }
+        .ant-input:placeholder-shown{
+          background-color: #393f4f !important;
+        }
+        .area-tree {
+          .ant-tree {
+            margin-top: 5px;
+          }
+        }
+      }
+      .form-confirm {
+        display: flex;
+        justify-content: center;
+        margin-top: 10px;
+        padding-top: 20px;
+        border-top: 1px solid #9be0f147;
+        button {
+          margin: 0 10px;
+        }
+      }
+    }
+}
\ No newline at end of file
diff --git a/src/pages/SystemMgm/OrgnizationMgm/loadable.jsx b/src/pages/SystemMgm/OrgnizationMgm/loadable.jsx
index 91ab36e..1a6d981 100644
--- a/src/pages/SystemMgm/OrgnizationMgm/loadable.jsx
+++ b/src/pages/SystemMgm/OrgnizationMgm/loadable.jsx
@@ -1,15 +1,308 @@
-import React, { useState, useRef, useEffect } from "react";
-// import {  message, Pagination, Table, Space, Modal, } from "antd";
-// import { dictionary, utils } from "@/config/common";
-// import moment from 'moment'
-// import {   useSessionStorageState, useUpdateEffect, useSize, useUpdate } from 'ahooks';
-// import ajax from "@/services"
-// import {  FormInput, FormSelect, OptionPanel, ResultPanel, FormSliderPicker, AreaCascader, ImgResize, ImgZoom, } from "@/components"
-// import "./index.scss";
-// import errorImg from "@/assets/images/layout/error.png"
-// import {  useLocation } from "react-router-dom";
+import React, { useState, useRef, useEffect, useMemo } from "react";
+import {  message, Input, Upload, Modal, Space, Tree, Tabs, Form, Select, Button } from "antd";
+import { DeleteOutlined, EditOutlined, PlusCircleOutlined, LoadingOutlined, PlusOutlined } from '@ant-design/icons';
+import ajax from "@/services"
+import "./index.scss";
+
+const isDev = window.location.href.indexOf('localhost') > -1
 function OrgnizationMgm() {
-    return <div>OrgnizationMgm</div>
+
+    const [editStatus, setEditStatus] = useState(false)
+    const [defaultTreeActiveKey, setDefaultTreeActiveKey] = useState([])
+    const [defaultTreeAreaActiveKey, setDefaultTreeAreaActiveKey] = useState([])
+    const [imgUploading, setImgUploading] = useState(false)
+    const [imgUrl, setImgUrl] = useState("")
+    const [orgTree, setOrgTree] = useState([])
+    const [areaTree, setAreaTree] = useState([])
+    const [activeOrg, setActiveOrg] = useState({})
+    const [baseForm] = Form.useForm()
+
+    const imgUploadUrl = () => {
+        return isDev ? `http://10.10.128.65:3001/mock/11/v1/controlalarm/upload_image` : `${baseApi}/v1/controlalarm/upload_image`
+    }
+
+    const getAreaTree = () => {
+        ajax.getAreaTree().then((e) => {
+            if (e.status == 20000) {
+                setAreaTree(e.data)
+                setDefaultTreeActiveKey([e.data[0].id])
+            }
+        })
+    }
+
+    const ajaxGetOrgDetail = (id) => {
+        handleCancel()
+        return new Promise((resolved, rejected) => {
+            ajax.getOrgDetail({id: id}).then((e) => {
+                if (e.status == 20000) {
+                    resolved(e.data)
+                } else {
+                    rejected(e.message)
+                }
+            }).catch((err) => {
+                rejected(err)
+            })
+        })
+    }
+
+    const getOrgTree = () => {
+        ajax.getOrgTree().then((e) => {
+            if (e.status == 20000) {
+                setOrgTree(e.data)
+                handleTreeClick(undefined, {node: e.data[0]})
+            }
+        })
+    }
+    const handleOrgAdd = (e) => {
+        e.stopPropagation()
+        e.nativeEvent.stopImmediatePropagation()
+
+    }
+    const handleOrgDel = () => {
+        e.stopPropagation()
+        e.nativeEvent.stopImmediatePropagation()
+    }
+    const handleOrgEdit = () => {
+        e.stopPropagation()
+        e.nativeEvent.stopImmediatePropagation()
+    }
+
+    const ajaxOrgDetailSave = (data) => {
+        return new Promise((resolved, rejected) => {
+            ajax.orgDetailEdit(data).then((e) => {
+                if (e.status == 20000) {
+                    resolved(e.message)
+                } else {
+                    rejected(e.message)
+                }
+            }).catch((err) => {
+                rejected(err)
+            })
+        })
+    }
+
+    const handleTreeClick = (e, {node}) => {
+        ajaxGetOrgDetail(node.id).then((data) => {
+            setActiveOrg({
+                id: node.id,
+                key: node.key,
+                name: node.name,
+                level: node.level,
+                img_url: node.img_url,
+                control_area: node.control_area,
+                ...data
+            })
+            baseForm.setFieldsValue({
+                platform: data.platform,
+                control_type: data.control_type,
+                control_area: data.control_area,
+                img_url: data.img_url
+            })
+            setImgUrl(data.img_url)
+        }).catch(err => {
+            message.error(err)
+        })
+    }
+
+    const uploadButton = (
+        <div>
+          {imgUploading ? <LoadingOutlined /> : <PlusOutlined />}
+          <div
+            style={{
+              marginTop: 4,
+            }}
+          >
+            点击上传
+          </div>
+        </div>
+    )
+
+    const beforeUpload = () => {
+        setImgUploading(true)
+        return true
+    }
+
+    const handleUploadChange = ({file}) => {
+        const res = file.response
+        if (res && res.status == 20000) {
+            baseForm.setFieldValue('img_url', res.data)
+            setImgUrl(res.data)
+            setImgUploading(false)
+        }
+    }
+
+    const handleBaseFormValueChange = () => {
+
+    }
+
+    const handleAreaTreeChange = (checkedKeys) => {
+        baseForm.setFieldValue('control_area', checkedKeys.join(','))
+    }
+
+    const getAreaDefaultKeys = () => {
+        return baseForm.getFieldValue('control_area')
+    }
+
+    const handleCancel = () => {
+        baseForm.setFieldsValue({
+            ...activeOrg
+        })
+        setImgUrl(activeOrg.img_url)
+        setEditStatus(false)
+    }
+
+    const handleConfirm = () => {
+        ajaxOrgDetailSave(baseForm.getFieldsValue()).then((msg) => {
+            message.success(msg)
+            setEditStatus(false)
+        }).catch((err) => {
+            message.error(err)
+        })
+    }
+
+    const handleEdit = () => {
+        setEditStatus(true)
+    }
+
+    const tabRender = useMemo(() => {
+        return [
+            {
+                label: `基础配置`,
+                key: '1',
+                children: (
+                    <div className="base-form-container">
+                        <Form
+                            form={baseForm}
+                            labelCol={{
+                                span: 2,
+                                offset: 1
+                            }}
+                            wrapperCol={{
+                                span: 4
+                            }}
+                            initialValues={{
+                                type: "1"
+                            }}
+                            onValuesChange={handleBaseFormValueChange}
+                        >
+                            <Form.Item name="id" hidden></Form.Item>
+                            <Form.Item name="name" hidden></Form.Item>
+                            <Form.Item label="机构名称" name="name">
+                                <Space/><Space/>{activeOrg.name}
+                            </Form.Item>
+                            <Form.Item label="平台名称" name="platform">
+                                <Input disabled={!editStatus}/>
+                            </Form.Item>
+                            <Form.Item label="平台logo" name="img_url">
+                                <Upload
+                                    name="avatar"
+                                    listType="picture-card"
+                                    className="avatar-uploader"
+                                    showUploadList={false}
+                                    action={imgUploadUrl()}
+                                    beforeUpload={beforeUpload}
+                                    disabled={!editStatus}
+                                    onChange={handleUploadChange}>
+                                    {imgUrl ? (
+                                        <img
+                                            src={imgUrl}
+                                            alt="avatar"
+                                            style={{
+                                                width: '100%',
+                                            }}
+                                        />
+                                    ) : (
+                                        uploadButton
+                                    )}
+                                </Upload>
+                            </Form.Item>
+                            {
+                                activeOrg.level > 2 ? <>
+                                    <Form.Item label="管辖范围" name="control_type">
+                                        <Select disabled={!editStatus}>
+                                            <Option value={1}>按区管理</Option>
+                                            <Option value={2}>按街管理</Option>
+                                        </Select>
+                                    </Form.Item>
+                                    <Form.Item label="管辖区域" className="area-tree" name="control_area">
+                                        <Tree
+                                            disabled={!editStatus}
+                                            checkable
+                                            defaultCheckedKeys={getAreaDefaultKeys()}
+                                            treeData={areaTree}
+                                            onCheck={handleAreaTreeChange}
+                                            fieldNames={{
+                                                title: 'name',
+                                                key: 'id'
+                                            }}
+                                        />
+                                    </Form.Item>
+                                </> : null
+                            }
+                        </Form>
+                    </div>
+                ),
+            },
+            activeOrg.level > 2 ? {
+                label: `功能配置`,
+                key: '2',
+                children: `Content of Tab Pane 2`,
+            } : undefined
+        ]
+    }, [JSON.stringify(activeOrg), editStatus, imgUrl])
+
+    useEffect(() => {
+        getOrgTree()
+        getAreaTree()
+    }, [])
+
+    const treeTitleRender = ({name, children, level, pid, id, virtually_code, lng_lat, code}) => {
+        return <>
+            <span className='label-text'>{name}</span>            
+            {
+                level > 2 ? <>
+                    <PlusCircleOutlined className='label-icon' onClick={(e) => handleOrgAdd(e, {level, pid, isCity: false})} />
+                    <DeleteOutlined className="label-icon" onClick={(e) => handleOrgDel(e, {name, id})} />
+                    <EditOutlined className="label-icon" onClick={(e) => handleOrgEdit(e, {name, id, virtually_code, code, lng_lat})}/>
+                </> : (
+                    <PlusCircleOutlined className='label-icon' onClick={(e) => handleOrgAdd(e, {level, pid, isCity: true})} />
+                )
+            }
+        </>
+    }
+
+    return ( 
+        <div className="orgnization-container">
+            <div className="org-tree-container">
+                <Tree
+                    defaultSelectedKeys={defaultTreeActiveKey}
+                    treeData={orgTree}
+                    titleRender={treeTitleRender}
+                    onSelect={handleTreeClick}
+                    fieldNames={{
+                        title: 'name'
+                    }}
+                >
+                </Tree>
+            </div>
+            <div className="org-content">
+                <Tabs
+                    defaultActiveKey="1"
+                    items={tabRender}
+                />
+                <div className="form-confirm">
+                    {
+                        !editStatus ? (
+                            <Button type="primary" className="yisa-btn" onClick={() => handleEdit()}>编辑</Button>
+                        ) : <>
+                            <Button type="primary" className="yisa-btn" onClick={() => handleConfirm()}>确认</Button>
+                            <Button type="ghost" className="yisa-btn" onClick={() => handleCancel()}>取消</Button>
+                        </>
+                    }
+                </div>
+            </div>
+        </div>
+    )
 }
 
 export default OrgnizationMgm;
\ No newline at end of file
diff --git a/src/services/system.js b/src/services/system.js
index 780c7a3..ed17697 100644
--- a/src/services/system.js
+++ b/src/services/system.js
@@ -258,12 +258,37 @@ const areaTreeDel = (params) => {
 
 const areaTreeEdit = (params) => {
   return ajax({
-    url: "/api/manage/area//edit_info",
+    url: "/api/manage/area/edit_info",
     type: "post",
     data: params,
   })
 }
 
+const orgDetailEdit = (params) => {
+  return ajax({
+    url: "/api/manage/org/edit_info",
+    type: "post",
+    data: params,
+  })
+}
+
+// 系统管理 - 组织tree
+const getOrgTree = (params) => {
+  return ajax({
+    url: '/api/manage/org/tree',
+    type: 'post',
+    data: params
+  })
+}
+
+const getOrgDetail = (params) => {
+  return ajax({
+    url: '/api/manage/org/detail',
+    type: 'post',
+    data: params
+  })
+}
+
 export default {
   getLocationListData,
   deleteLocationData,
@@ -294,5 +319,8 @@ export default {
   getConnectSave,
   areaTreeAdd,
   areaTreeDel,
-  areaTreeEdit
+  areaTreeEdit,
+  getOrgTree,
+  getOrgDetail,
+  orgDetailEdit
 }