diff --git a/src/app/pages/criminal-records-admin/criminal-records-admin.component.html b/src/app/pages/criminal-records-admin/criminal-records-admin.component.html
index 8ad4b46..050e9bd 100644
--- a/src/app/pages/criminal-records-admin/criminal-records-admin.component.html
+++ b/src/app/pages/criminal-records-admin/criminal-records-admin.component.html
@@ -1,4 +1,4 @@
-<div class="recordsbox">
+<div class="recordsboxadmin" id="recordsboxadmin"> 
   <div class="search">
     <form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
       <nz-form-item class="searchParams">
diff --git a/src/app/pages/criminal-records/criminal-records.component.html b/src/app/pages/criminal-records/criminal-records.component.html
index 95a2328..c59c6ff 100644
--- a/src/app/pages/criminal-records/criminal-records.component.html
+++ b/src/app/pages/criminal-records/criminal-records.component.html
@@ -1,4 +1,4 @@
-<div class="recordsbox">
+<div class="recordsbox" id="recordsbox">
   <div class="search">
     <form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
       <nz-form-item class="searchParams">
diff --git a/src/app/pages/equipment-info/equipment-info.component.html b/src/app/pages/equipment-info/equipment-info.component.html
new file mode 100644
index 0000000..47b9f19
--- /dev/null
+++ b/src/app/pages/equipment-info/equipment-info.component.html
@@ -0,0 +1 @@
+<p>equipment-info works!</p>
diff --git a/src/app/pages/equipment-info/equipment-info.component.scss b/src/app/pages/equipment-info/equipment-info.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/pages/equipment-info/equipment-info.component.ts b/src/app/pages/equipment-info/equipment-info.component.ts
new file mode 100644
index 0000000..e6bbd00
--- /dev/null
+++ b/src/app/pages/equipment-info/equipment-info.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-equipment-info',
+  templateUrl: './equipment-info.component.html',
+  styleUrls: ['./equipment-info.component.scss']
+})
+export class EquipmentInfoComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html
index 15e5cfd..ed6f6c5 100644
--- a/src/app/pages/home/home.component.html
+++ b/src/app/pages/home/home.component.html
@@ -12,6 +12,12 @@
         <li [routerLink]="['/home/records/admin']"  routerLinkActive="router-link-active">
             违规记录
         </li>
+        <!-- <li [routerLink]="['/home/equipmentInfo']"  routerLinkActive="router-link-active">
+            器材信息
+        </li>
+        <li [routerLink]="['/home/oliStationInfo']"  routerLinkActive="router-link-active">
+            基本信息
+        </li> -->
     </div>
     <div class="content">
         <router-outlet></router-outlet>
diff --git a/src/app/pages/left-domain/left-domain.component.html b/src/app/pages/left-domain/left-domain.component.html
new file mode 100644
index 0000000..037c440
--- /dev/null
+++ b/src/app/pages/left-domain/left-domain.component.html
@@ -0,0 +1,12 @@
+<div class="childContent">
+
+  <div class="childCenter">
+
+  </div>
+
+  <div class="childBottom" *ngIf="beforeFence === 0">
+    <button (click)="editInfo()"><i nz-icon nzType="edit" nzTheme="outline"></i>编辑信息</button>
+    <button (click)="deriveExcel()"><i nz-icon nzType="file-excel" nzTheme="outline"></i>导出Excel</button>
+  </div>
+
+</div>
diff --git a/src/app/pages/left-domain/left-domain.component.scss b/src/app/pages/left-domain/left-domain.component.scss
new file mode 100644
index 0000000..6f18b6c
--- /dev/null
+++ b/src/app/pages/left-domain/left-domain.component.scss
@@ -0,0 +1,34 @@
+.childContent{
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  font-family: Source Han Sans CN;
+  color: #fff;
+  .childCenter{
+    flex: 1;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+  .childBottom{
+    width: 100%;
+    height: 50px;
+    line-height: 50px;
+    text-align: center;
+    background: linear-gradient(360deg, #000D21 0%, #003B6E 100%);
+    box-shadow: 0px -2px 6px #36A2FF;
+    button{
+      width: 35%;
+      height: 32px;
+      line-height: 32px;
+      padding: 0;
+      margin: 0 10px;
+      color: #91CCFF;
+      background: rgba(0, 129, 255, 0.61);
+      border: 1px solid #36A2FF;
+      cursor: pointer;
+      .anticon{ margin-right: 3px; } //字体图标
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/app/pages/left-domain/left-domain.component.ts b/src/app/pages/left-domain/left-domain.component.ts
new file mode 100644
index 0000000..a2e06bc
--- /dev/null
+++ b/src/app/pages/left-domain/left-domain.component.ts
@@ -0,0 +1,40 @@
+import { Component, OnInit } from '@angular/core';
+import { PlanComponent } from '../plan/plan.component';
+
+@Component({
+  selector: 'app-left-domain',
+  templateUrl: './left-domain.component.html',
+  styleUrls: ['./left-domain.component.scss']
+})
+export class LeftDomainComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+    this.initComponent()
+  }
+
+  beforeFence: number; //当前选中功能栏
+
+  //初始化组件
+  initComponent(type?: number) {
+    if (type != undefined && type != null) {
+      this.beforeFence = type
+    } else {
+      this.beforeFence = PlanComponent.instance.selectFence
+    }
+  }
+
+  //编辑信息
+  editInfo() {
+
+  }
+
+  //导出Excel
+  deriveExcel() {
+
+  }
+
+
+
+}
diff --git a/src/app/pages/oil-station-info/oil-station-info.component.html b/src/app/pages/oil-station-info/oil-station-info.component.html
new file mode 100644
index 0000000..4513a0b
--- /dev/null
+++ b/src/app/pages/oil-station-info/oil-station-info.component.html
@@ -0,0 +1 @@
+<p>oil-station-info works!</p>
diff --git a/src/app/pages/oil-station-info/oil-station-info.component.scss b/src/app/pages/oil-station-info/oil-station-info.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/pages/oil-station-info/oil-station-info.component.ts b/src/app/pages/oil-station-info/oil-station-info.component.ts
new file mode 100644
index 0000000..30e2d0e
--- /dev/null
+++ b/src/app/pages/oil-station-info/oil-station-info.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-oil-station-info',
+  templateUrl: './oil-station-info.component.html',
+  styleUrls: ['./oil-station-info.component.scss']
+})
+export class OilStationInfoComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/pages/pages-routing.module.ts b/src/app/pages/pages-routing.module.ts
index 35bce70..1da3c55 100644
--- a/src/app/pages/pages-routing.module.ts
+++ b/src/app/pages/pages-routing.module.ts
@@ -6,13 +6,18 @@ import { CriminalRecordsComponent } from './criminal-records/criminal-records.co
 import {AuthGuard} from '../auth.guard'
 import { TodayWarningAdminComponent } from './today-warning-admin/today-warning-admin.component';
 import { CriminalRecordsAdminComponent } from './criminal-records-admin/criminal-records-admin.component';
+import { OilStationInfoComponent } from './oil-station-info/oil-station-info.component';
+import { EquipmentInfoComponent } from './equipment-info/equipment-info.component';
 
 const routes: Routes = [
     { path: 'plan', component: PlanComponent , data: { permission: 'xxxx' },canActivate: [AuthGuard]},
     { path: 'warning/petrolStation', component: TodayWarningComponent },
     { path: 'warning/admin', component: TodayWarningAdminComponent },
     { path: 'records/petrolStation', component: CriminalRecordsComponent },
-    { path: 'records/admin', component: CriminalRecordsAdminComponent }
+    { path: 'records/admin', component: CriminalRecordsAdminComponent },
+    { path: 'equipmentInfo', component: EquipmentInfoComponent },
+    { path: 'oliStationInfo', component: OilStationInfoComponent }
+   
 ];
 
 @NgModule({
diff --git a/src/app/pages/pages.module.ts b/src/app/pages/pages.module.ts
index ddab50b..9068a3d 100644
--- a/src/app/pages/pages.module.ts
+++ b/src/app/pages/pages.module.ts
@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { A11yModule  } from '@angular/cdk/a11y';
+import { A11yModule } from '@angular/cdk/a11y';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { PortalModule } from '@angular/cdk/portal';
 import { ScrollingModule } from '@angular/cdk/scrolling';
@@ -31,8 +31,11 @@ import { NzMessageModule } from 'ng-zorro-antd/message';
 import { NzSpinModule } from 'ng-zorro-antd/spin';
 import { TodayWarningAdminComponent } from './today-warning-admin/today-warning-admin.component';
 import { CriminalRecordsAdminComponent } from './criminal-records-admin/criminal-records-admin.component';
+import { EquipmentInfoComponent } from './equipment-info/equipment-info.component';
+import { OilStationInfoComponent } from './oil-station-info/oil-station-info.component';
+import { LeftDomainComponent } from './left-domain/left-domain.component';
 @NgModule({
-  declarations: [LoginComponent, RegisterComponent, HomeComponent, PlanComponent, TodayWarningComponent, CriminalRecordsComponent, TodayWarningAdminComponent, CriminalRecordsAdminComponent,],
+  declarations: [LoginComponent, RegisterComponent, HomeComponent, PlanComponent, TodayWarningComponent, CriminalRecordsComponent, TodayWarningAdminComponent, CriminalRecordsAdminComponent, LeftDomainComponent, EquipmentInfoComponent, OilStationInfoComponent],
   imports: [
     PagesRoutingModule,
     CommonModule,
diff --git a/src/app/pages/plan/plan.component.html b/src/app/pages/plan/plan.component.html
index f526646..d626cd2 100644
--- a/src/app/pages/plan/plan.component.html
+++ b/src/app/pages/plan/plan.component.html
@@ -15,6 +15,17 @@
   <div class="center">
     <canvas id="center"></canvas>
 
+    <!-- 左侧子组件 -->
+    <div class="leftChildComponent" *ngIf="isShowChildComponent" [ngStyle]="{ 'left': isShowLeftBuilding? '15%' : null }">
+      <div class="leftChildHeader">
+        <div><i nz-icon nzType="star" nzTheme="outline"></i></div>
+        <div><p>{{allFence[selectFence]}}</p></div>
+        <div (click)="toggleHeaderFence(selectFence)" title="关闭"><i nz-icon nzType="close-circle" nzTheme="outline"></i></div>
+      </div>
+      <div class="leftChildCenter"><app-left-domain #leftDomain></app-left-domain></div>
+    </div>
+    <!-- 左侧子组件 -->
+
     <!-- 左侧建筑栏 -->
     <div class="showLeftBuilding" title="显示" *ngIf="!isShowLeftBuilding" (click)="toggleLeftBuilding(true)"><i nz-icon nzType="right" nzTheme="outline"></i></div>
     <div class="leftBuilding" [ngClass]="{'isShowLeftBuilding': isShowLeftBuilding === false}">
diff --git a/src/app/pages/plan/plan.component.scss b/src/app/pages/plan/plan.component.scss
index 11fe2a3..c98eb3c 100644
--- a/src/app/pages/plan/plan.component.scss
+++ b/src/app/pages/plan/plan.component.scss
@@ -62,6 +62,59 @@
   .selectRightTopFast { border: 1px solid #fff; } //选种样式
 }
 
+//左侧子组件
+.leftChildComponent{
+  width: 300px;
+  height: 90%;
+  position: absolute;
+  left: 3%;
+  top: 0;
+  bottom: 0;
+  margin: auto;/*这行代码是关键*/
+  z-index: 10;
+  color: #fff;
+  transition: left 0.5s;
+  background: linear-gradient(360deg, #000D21 0%, rgba(0, 59, 110, 0.8) 100%);
+  display: flex;
+  flex-direction: column;
+  .leftChildHeader{
+    display: flex;
+    width: 95%;
+    height: 30px;
+    line-height: 30px;
+    margin: 15px auto;
+    background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, rgba(35, 153, 255, 0.8) 50%, rgba(35, 153, 255, 0) 100%);
+    div:first-child{
+      width: 30px;
+      height: 30px;
+      border: 1px solid #2399FF;
+      box-shadow: 0px 2px 8px #2399FF;
+      border-radius: 50%;
+      text-align: center;
+    }
+    div:nth-child(2){
+      box-sizing: border-box;
+      margin: 0 10px;
+      font-weight: 900;
+      font-size: 16px;
+      letter-spacing: 3px;
+      font-style: italic;
+      flex: 1;
+    }
+    div:last-child{
+      width: 30px;
+      height: 30px;
+      text-align: center;
+      cursor: pointer;
+      .anticon{ color: #91CCFF; } //字体图标
+    }
+  }
+  .leftChildCenter{
+    flex: 1;
+    overflow: hidden;
+  }
+}
+
 //左侧建筑
 .showLeftBuilding{
   width: 30px;
@@ -90,7 +143,7 @@
   transition: margin-left 0.5s;
   display: flex;
   flex-direction: column;
-  .hideLeft { text-align: right; color: #fff; padding: 3px 5px; z-index: 10; }
+  .hideLeft { text-align: right; color: #fff; padding: 3px 5px; z-index: 1; }
   .leftHeader {
     overflow: hidden;
     text-align: center;
diff --git a/src/app/pages/plan/plan.component.ts b/src/app/pages/plan/plan.component.ts
index ee714f7..4c1043f 100644
--- a/src/app/pages/plan/plan.component.ts
+++ b/src/app/pages/plan/plan.component.ts
@@ -1,4 +1,4 @@
-import { Component, ElementRef, OnInit } from '@angular/core';
+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 import { Game } from 'src/app/babylon/game';
 import { LoginSatus } from 'src/app/babylon/controller/status/login-status';
 import { StatusManager } from 'src/app/babylon/controller/status/status-manager';
@@ -17,6 +17,7 @@ import { FacilityWindow } from 'src/app/babylon/view/facility-window/facility-wi
 import { FacilityInfoUIItem } from 'src/app/babylon/view/facilityinfoinscene-window/facilityinfo-ui-item';
 import { EventManager } from '@angular/platform-browser';
 import { NzMessageService } from 'ng-zorro-antd/message';
+import { LeftDomainComponent } from '../left-domain/left-domain.component';
 
 
 
@@ -95,6 +96,7 @@ export class PlanComponent implements OnInit {
   allFence: string[] = ["基本信息", "加油机", "油罐设备", "消防设施", "安全疏散", "输油管线", "油气回收", "应急处置"]; //头部 功能栏
   selectFence: number = -1; //选中 头部功能栏
   isShowChildComponent: boolean = false; //是否 显示左侧子组件
+  @ViewChild('leftDomain')leftDomain: LeftDomainComponent; //子组件引用
   isOpenAwning: boolean = true; //是否 打开罩棚
   selectMeasure: number = 0; //当前选择 测量工具
 
@@ -104,6 +106,7 @@ export class PlanComponent implements OnInit {
     let buildingWindow: BuildingWindow = this.beforeOneSatus.buildingWindow;
     let fenceType: JYZInfoMoudleType = this.getFenceType(type)
     if (this.selectFence != type) {
+      this.isShowChildComponent && this.leftDomain? this.leftDomain.initComponent(type) : null; //手动初始化子组件
       this.selectFence = type
       this.isShowChildComponent = true
       type>0 && type<7? buildingWindow.showJYZInfoModel(fenceType, true) : null
@@ -136,6 +139,7 @@ export class PlanComponent implements OnInit {
   //切换 头部罩棚
   toggleHeaderAwning(isOpen: boolean) {
     this.isOpenAwning = isOpen
+    ToolbarWindow.instance.showZP(isOpen)
   }
 
   //切换 测量工具
diff --git a/src/app/pages/today-warning-admin/today-warning-admin.component.html b/src/app/pages/today-warning-admin/today-warning-admin.component.html
index 75a90ad..d6c5ca2 100644
--- a/src/app/pages/today-warning-admin/today-warning-admin.component.html
+++ b/src/app/pages/today-warning-admin/today-warning-admin.component.html
@@ -1,4 +1,4 @@
-<div class="warningbox">
+<div class="warningbox" id="warningboxadmin">
   <div class="title">
     <app-title [name]="'当日违规事件列表'"></app-title>
   </div>
diff --git a/src/app/pages/today-warning-admin/today-warning-admin.component.scss b/src/app/pages/today-warning-admin/today-warning-admin.component.scss
index fb8f536..57d146e 100644
--- a/src/app/pages/today-warning-admin/today-warning-admin.component.scss
+++ b/src/app/pages/today-warning-admin/today-warning-admin.component.scss
@@ -35,14 +35,15 @@
       }
 
       nz-select {
-        color: rgba(145, 204, 255, 0.95);;
+        color: rgba(145, 204, 255, 0.95);
+        ;
       }
 
       nz-date-picker {
         background-color: rgba(0, 0, 0, 0);
         width: 145%;
       }
-      
+
     }
   }
 
@@ -91,6 +92,7 @@
         text-overflow: ellipsis;
         display: flex;
         align-items: center;
+
         button {
           font-size: 15px;
           background-color: #013064;
@@ -110,9 +112,11 @@
         text-align: center;
         margin-left: 8px;
       }
+
       .propsm1 {
         background: #2399FF;
       }
+
       .propsm2 {
         background: #FF9963;
       }
@@ -126,32 +130,6 @@
       color: #23D9FF;
     }
   }
-}
-
 
-//遮罩层
-::ng-deep .vertical-center-modal {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-::ng-deep .ant-modal-body {
-  background: #072549;
-  height: 660px;
-  padding: 5px;
-  // border: 1px solid #8eb9e3;
-  box-shadow: 0 0 3px #8eb9e3;
-  color: #fff;
-}
-
-::ng-deep .ant-modal-close-x {
-  width: 36px;
-  height: 36px;
-  line-height: 36px;
-  color: white;
-}
 
-::ng-deep .vertical-center-modal .ant-modal {
-  top: 0;
 }
diff --git a/src/app/pages/today-warning/today-warning.component.html b/src/app/pages/today-warning/today-warning.component.html
index 4ca68b8..14ae5cd 100644
--- a/src/app/pages/today-warning/today-warning.component.html
+++ b/src/app/pages/today-warning/today-warning.component.html
@@ -1,4 +1,4 @@
-<div class="warningbox">
+<div class="warningbox" id="warningbox">
   <div class="title">
     <app-title [name]="'当日违规事件列表'"></app-title>
   </div>
diff --git a/src/app/pages/today-warning/today-warning.component.scss b/src/app/pages/today-warning/today-warning.component.scss
index 16a8d2c..1b26d4a 100644
--- a/src/app/pages/today-warning/today-warning.component.scss
+++ b/src/app/pages/today-warning/today-warning.component.scss
@@ -99,30 +99,3 @@
   }
 }
 
-
-//遮罩层
-::ng-deep .vertical-center-modal {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-::ng-deep .ant-modal-body {
-  background: #072549;
-  height: 660px;
-  padding: 5px;
-  // border: 1px solid #8eb9e3;
-  box-shadow: 0 0 3px #8eb9e3;
-  color: #fff;
-}
-
-::ng-deep .ant-modal-close-x {
-  width: 36px;
-  height: 36px;
-  line-height: 36px;
-  color: white;
-}
-
-::ng-deep .vertical-center-modal .ant-modal {
-  top: 0;
-}
diff --git a/src/app/service/tree.service.ts b/src/app/service/tree.service.ts
index f6c9713..8753b54 100644
--- a/src/app/service/tree.service.ts
+++ b/src/app/service/tree.service.ts
@@ -18,13 +18,13 @@ export class TreeService {
                     parentNode.children = []
                 }
 
-                if (parentNode.children.length == 0) {
-                    item.isTop = true;
-                } else {
-                    item.isTop = false;
-                    parentNode.children[parentNode.children.length -1].isBottom = false;
-                }
-                item.isBottom = true;
+                // if (parentNode.children.length == 0) {
+                //     item.isTop = true;
+                // } else {
+                //     item.isTop = false;
+                //     parentNode.children[parentNode.children.length -1].isBottom = false;
+                // }
+                // item.isBottom = true;
 
                 parentNode.children.push(item)
             }else{
diff --git a/src/app/system-management/navigation/navigation.component.html b/src/app/system-management/navigation/navigation.component.html
index 2b28ba1..3ab03ce 100644
--- a/src/app/system-management/navigation/navigation.component.html
+++ b/src/app/system-management/navigation/navigation.component.html
@@ -1 +1,38 @@
-<p>系统管理页面</p>
+<!-- <p>系统管理页面</p> -->
+<nz-layout>
+  <nz-sider [nzWidth]='300'>
+    <div class="logo">
+      <img src="../../../assets/images/logo.png" alt="">
+    </div>
+    <div class="headPortrait">
+      <div class="photograph">
+        <img src="../../../assets/images/userbig.png" alt="">
+      </div>
+      <span>Administrator</span>
+      <span><img src="../../../assets/images/icon/admin.png" alt=""> 管理员</span>
+    </div>
+    <div class="nav">
+      <ul>
+        <li [routerLink]="['/system/organization']"  routerLinkActive="router-link-active"><img src="../../../assets/images/icon/organization.png" alt="">组织机构管理</li>
+        <li [routerLink]="['/system/user']"  routerLinkActive="router-link-active"><img src="../../../assets/images/icon/user.png" alt="">用户管理</li>
+        <li [routerLink]="['/system/role']"  routerLinkActive="router-link-active"><img src="../../../assets/images/icon/role.png" alt="">角色管理</li>
+      </ul>
+    </div>
+  </nz-sider>
+  <nz-layout>
+    <nz-header>
+      <span>Hey，欢迎登录中化油站可视化智能安全管理系统</span>
+      <a nz-dropdown [nzDropdownMenu]="menu" [nzTrigger]="'click'" [nzBackdrop]='false'>
+        <i nz-icon nzType="setting"></i>
+      </a>
+      <nz-dropdown-menu #menu="nzDropdownMenu">
+        <ul nz-menu nzSelectable>
+          <li nz-menu-item (click)="signOut()">退出</li>
+        </ul>
+      </nz-dropdown-menu>
+    </nz-header>
+    <nz-content>
+      <router-outlet></router-outlet>
+    </nz-content>
+  </nz-layout>
+</nz-layout>
diff --git a/src/app/system-management/navigation/navigation.component.scss b/src/app/system-management/navigation/navigation.component.scss
index e69de29..3a4a07a 100644
--- a/src/app/system-management/navigation/navigation.component.scss
+++ b/src/app/system-management/navigation/navigation.component.scss
@@ -0,0 +1,78 @@
+nz-layout {
+  width: 100%;
+  height: 100%;
+  color: #fff;
+  font-size: 16px !important;
+}
+
+nz-sider {
+  background: #001B3B;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .logo {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    margin-top: 40px;
+  }
+
+  .headPortrait {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 46px;
+    margin-bottom: 46px;
+
+    .photograph {
+      // width: 140px;
+      // height: 140px;
+      // border: 4px solid #FFFFFF;
+      // opacity: 1;
+      // border-radius: 32px;
+    }
+
+    span {
+      margin-top: 18px;
+    }
+  }
+
+  .nav {
+    ul {
+      li {
+        width: 300px;
+        height: 40px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: left;
+        margin-bottom: 16px;
+        box-sizing: border-box;
+        padding-left: 26%;
+        img{
+            margin-right: 8px;
+        }
+      }
+
+      .router-link-active {
+        background: linear-gradient(90deg, rgba(0, 13, 33, 0) 0%, #2399FF 52%, rgba(0, 13, 33, 0) 100%);
+      }
+    }
+  }
+}
+
+nz-header {
+  height: 56px;
+  background: #FFFFFF;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px;
+}
+
+nz-content {
+  background: #F2F2F2;
+  box-sizing: border-box;
+  padding: 16px;
+}
diff --git a/src/app/system-management/navigation/navigation.component.ts b/src/app/system-management/navigation/navigation.component.ts
index 18be053..d9b293a 100644
--- a/src/app/system-management/navigation/navigation.component.ts
+++ b/src/app/system-management/navigation/navigation.component.ts
@@ -11,5 +11,7 @@ export class NavigationComponent implements OnInit {
 
   ngOnInit(): void {
   }
-
+  signOut() {
+    // history.go(-1);
+  }
 }
diff --git a/src/app/system-management/organization/addor/addor.component.html b/src/app/system-management/organization/addor/addor.component.html
new file mode 100644
index 0000000..ab9ed73
--- /dev/null
+++ b/src/app/system-management/organization/addor/addor.component.html
@@ -0,0 +1,21 @@
+<div class="box">
+  <form nz-form [formGroup]="validateForm">
+    <nz-form-item>
+      <nz-form-control nzErrorTip="请输入名称">
+        <nz-input-group>
+          <input nz-input type="text" formControlName="name" placeholder="请输入名称" />
+        </nz-input-group>
+      </nz-form-control>
+    </nz-form-item>
+    <!-- <nz-form-item>
+      <nz-form-control>
+        <nz-select formControlName="power" nzPlaceHolder="请选择权限" (nzScrollToBottom)="loadMore()" nzMode="multiple">
+          <nz-option *ngFor="let o of optionList" [nzValue]="o" [nzLabel]="o.displayName"></nz-option>
+        </nz-select>
+        <ng-template #renderTemplate>
+          <nz-spin *ngIf="isLoading"></nz-spin>
+        </ng-template>
+      </nz-form-control>
+    </nz-form-item> -->
+  </form>
+</div>
diff --git a/src/app/system-management/organization/addor/addor.component.scss b/src/app/system-management/organization/addor/addor.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/system-management/organization/addor/addor.component.ts b/src/app/system-management/organization/addor/addor.component.ts
new file mode 100644
index 0000000..3a5dc13
--- /dev/null
+++ b/src/app/system-management/organization/addor/addor.component.ts
@@ -0,0 +1,26 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { NzModalRef } from 'ng-zorro-antd/modal';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { HttpClient } from '@angular/common/http';
+@Component({
+  selector: 'app-addor',
+  templateUrl: './addor.component.html',
+  styleUrls: ['./addor.component.scss']
+})
+export class AddorComponent implements OnInit {
+
+  @Input() title?: string;
+  @Input() subtitle?: string;
+  validateForm!: FormGroup;
+  constructor(private modal: NzModalRef, private fb: FormBuilder, private http: HttpClient) { }
+
+  ngOnInit(): void {
+    this.validateForm = this.fb.group({
+      name: [null, [Validators.required]]
+    });
+  }
+  destroyModal(): void {
+    this.modal.destroy({ data: 'this the result data' });
+  }
+
+}
diff --git a/src/app/system-management/organization/editor/editor.component.html b/src/app/system-management/organization/editor/editor.component.html
new file mode 100644
index 0000000..4769623
--- /dev/null
+++ b/src/app/system-management/organization/editor/editor.component.html
@@ -0,0 +1,21 @@
+<div class="box">
+  <form nz-form [formGroup]="validateForm">
+    <nz-form-item>
+      <nz-form-control nzErrorTip="请输入名称">
+        <nz-input-group>
+          <input nz-input type="text" formControlName="name" placeholder="请输入名称" />
+        </nz-input-group>
+      </nz-form-control>
+    </nz-form-item>
+    <!-- <nz-form-item>
+        <nz-form-control>
+          <nz-select formControlName="power" nzPlaceHolder="请选择权限" (nzScrollToBottom)="loadMore()" nzMode="multiple">
+            <nz-option *ngFor="let o of optionList" [nzValue]="o" [nzLabel]="o.displayName"></nz-option>
+          </nz-select>
+          <ng-template #renderTemplate>
+            <nz-spin *ngIf="isLoading"></nz-spin>
+          </ng-template>
+        </nz-form-control>
+      </nz-form-item> -->
+  </form>
+</div>
diff --git a/src/app/system-management/organization/editor/editor.component.scss b/src/app/system-management/organization/editor/editor.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/system-management/organization/editor/editor.component.ts b/src/app/system-management/organization/editor/editor.component.ts
new file mode 100644
index 0000000..c7a7805
--- /dev/null
+++ b/src/app/system-management/organization/editor/editor.component.ts
@@ -0,0 +1,27 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { NzModalRef } from 'ng-zorro-antd/modal';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { HttpClient } from '@angular/common/http';
+@Component({
+  selector: 'app-editor',
+  templateUrl: './editor.component.html',
+  styleUrls: ['./editor.component.scss']
+})
+export class EditorComponent implements OnInit {
+
+  @Input() data?: any;
+  validateForm!: FormGroup;
+  constructor(private modal: NzModalRef, private fb: FormBuilder, private http: HttpClient) { }
+
+  ngOnInit(): void {
+    this.validateForm = this.fb.group({
+      name: [null, [Validators.required]],
+      power: [null, [Validators.required]]
+    });
+  }
+  destroyModal(): void {
+    this.modal.destroy({ data: 'this the result data' });
+  }
+
+
+}
diff --git a/src/app/system-management/organization/organization.component.html b/src/app/system-management/organization/organization.component.html
index 414c783..4bcf388 100644
--- a/src/app/system-management/organization/organization.component.html
+++ b/src/app/system-management/organization/organization.component.html
@@ -1 +1,43 @@
-<p>organization works!</p>
+<div class="orbox" id="orbox">
+  <div class="topbox">
+    <div class="lefttop">
+      <span>组织机构列表</span>
+      <span><img style="vertical-align: top;" src="../../../assets/images/icon/orgrey.png" alt=""> {{totalCount}}个单位</span>
+    </div>
+    <div class="righttop">
+      <!-- <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
+        <nz-form-item>
+          <nz-form-control>
+            <nz-input-group nzPrefixIcon="search">
+              <input type="text" nz-input placeholder="请输入单位" formControlName="search" [(ngModel)]="searchValue"/>
+            </nz-input-group>
+          </nz-form-control>
+          <button style="display: none;" type="submit"></button>
+        </nz-form-item>
+      </form> -->
+      <nz-input-group nzPrefixIcon="search">
+        <input type="text" nz-input placeholder="请输入单位" [(ngModel)]="searchValue"/>
+      </nz-input-group>
+      <button nz-button nzType="primary" (click)="addOr()"><i nz-icon nzType="plus-circle"
+          nzTheme="outline"></i>新增</button>
+    </div>
+  </div>
+  <div class="treeTitle">
+    <span>组织机构</span>
+    <span>操作</span>
+  </div>
+  <nz-tree [nzHideUnMatched]='true' [nzSearchValue]="searchValue" #nzTreeComponent [nzData]="nodes" [nzExpandAll]="nzExpandAll" [nzExpandedKeys]="defaultExpandedKeys"
+    (nzClick)="nzClick($event)" (nzContextMenu)="nzClick($event)" (nzCheckBoxChange)="nzCheck($event)"
+    (nzExpandChange)="nzCheck($event)" [nzTreeTemplate]="nzTreeTemplate">
+  </nz-tree>
+  <ng-template #nzTreeTemplate let-node let-origin="origin">
+    <div class="nodebox">
+      <span class="name">{{ node.title }}</span>
+      <span class="operation">
+        <span (click)="addOr(node)">新增</span>
+        <span (click)="editOr(node)">编辑</span>
+        <span (click)="deleteOr(node)">删除</span>
+      </span>
+    </div>
+  </ng-template>
+</div>
diff --git a/src/app/system-management/organization/organization.component.scss b/src/app/system-management/organization/organization.component.scss
index e69de29..a365d13 100644
--- a/src/app/system-management/organization/organization.component.scss
+++ b/src/app/system-management/organization/organization.component.scss
@@ -0,0 +1,78 @@
+.orbox {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  background: #fff;
+  box-sizing: border-box;
+  padding: 20px;
+  font-size: 15px;
+}
+
+.topbox {
+  width: 700px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .lefttop {
+    span:nth-child(1) {
+      color: #000D21;
+      margin-right: 16px;
+    }
+
+    span:nth-child(2) {
+      color: rgba(36, 36, 36, 0.24);
+    }
+  }
+
+  .righttop {
+    height: 36px;
+    display: flex;
+
+    button {
+      margin-left: 16px;
+    }
+
+    nz-input-group {
+      height: 32px;
+    }
+  }
+}
+
+.treeTitle {
+  width: 700px;
+  height: 36px;
+  line-height: 36px;
+  display: flex;
+  justify-content: space-between;
+  color: #000D21;
+  box-sizing: border-box;
+  padding-left: 30px;
+  padding-right: 180px;
+  background: rgba(145, 204, 255, 0.2);
+  margin: 12px 0;
+}
+
+.nodebox {
+  font-size: 15px;
+
+}
+
+.operation {
+  position: absolute;
+  right: 0;
+
+  span {
+    margin-left: 40px;
+  }
+
+  span:nth-child(1),
+  span:nth-child(2) {
+    color: #2399FF;
+  }
+
+  span:nth-child(3) {
+    color: rgba(0, 13, 33, 0.48);
+  }
+}
diff --git a/src/app/system-management/organization/organization.component.ts b/src/app/system-management/organization/organization.component.ts
index b7e9eee..3629aaa 100644
--- a/src/app/system-management/organization/organization.component.ts
+++ b/src/app/system-management/organization/organization.component.ts
@@ -1,15 +1,182 @@
-import { Component, OnInit } from '@angular/core';
-
+import { HttpClient } from '@angular/common/http';
+import { Component, OnInit, AfterViewInit, ViewChild, ViewContainerRef } from '@angular/core';
+import { TreeService } from 'src/app/service/tree.service';
+import { NzFormatEmitEvent, NzTreeComponent, NzTreeNodeOptions } from 'ng-zorro-antd/tree';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { NzModalService } from 'ng-zorro-antd/modal';
+import { NzMessageService } from 'ng-zorro-antd/message';
+import { AddorComponent } from './addor/addor.component';
+import { EditorComponent } from './editor/editor.component';
 @Component({
   selector: 'app-organization',
   templateUrl: './organization.component.html',
   styleUrls: ['./organization.component.scss']
 })
 export class OrganizationComponent implements OnInit {
-
-  constructor() { }
+  validateForm!: FormGroup;
+  constructor(private fb: FormBuilder, private http: HttpClient, private toTree: TreeService, private modal: NzModalService, private message: NzMessageService, private viewContainerRef: ViewContainerRef) { }
 
   ngOnInit(): void {
+    this.validateForm = this.fb.group({
+      search: [null]
+    });
+    this.getAllOrganization()
+  }
+  //搜索框提交
+  submitForm(): void {
+    console.log(12345)
+    for (const i in this.validateForm.controls) {
+      this.validateForm.controls[i].markAsDirty();
+      this.validateForm.controls[i].updateValueAndValidity();
+    }
+  }
+
+  //获取所有组织机构
+  searchValue = '';
+  nzExpandAll = false;
+  totalCount:string
+  getAllOrganization() {
+    this.http.get('/api/services/app/Organization/GetAll').subscribe((data: any) => {
+      this.totalCount = data.result.totalCount
+      // console.log('组织机构',data.result.totalCount)
+      data.result.items.forEach(element => {
+        element.key = element.code
+        element.title = element.displayName
+        element.selectable = false
+      });
+      this.nodes = [...this.toTree.toTree(data.result.items)]
+      // this.nzExpandAll = true;
+      this.nzTreeComponent.getExpandedNodeList().forEach((item) => {
+        this.defaultExpandedKeys.push(item.key)
+      })
+    })
+  }
+
+
+  @ViewChild('nzTreeComponent', { static: false }) nzTreeComponent!: NzTreeComponent;
+
+  defaultExpandedKeys = [];
+
+  nodes: any[] = []
+
+  nzClick(event: NzFormatEmitEvent): void {
+    // console.log(event);
+    console.log('展开节点', this.nzTreeComponent.getExpandedNodeList())
+
+
   }
 
+  nzCheck(event: NzFormatEmitEvent): void {
+    console.log(event);
+  }
+
+  // nzSelectedKeys change
+  nzSelect(keys: string[]): void {
+    console.log(keys, this.nzTreeComponent.getSelectedNodeList());
+  }
+
+  ngAfterViewInit(): void {
+    // get node by key: '10011'
+    console.log(this.nzTreeComponent.getTreeNodeByKey('10011'));
+    // use tree methods
+    console.log(
+      this.nzTreeComponent.getTreeNodes(),
+      this.nzTreeComponent.getCheckedNodeList(),
+      this.nzTreeComponent.getSelectedNodeList(),
+      this.nzTreeComponent.getExpandedNodeList()
+    );
+  }
+
+  addOr(node?: any) {
+    const modal = this.modal.create({
+      nzTitle: node ? '新增组织机构' : '新增一级组织机构',
+      nzContent: AddorComponent,
+      nzViewContainerRef: this.viewContainerRef,
+      nzWidth: 288,
+      nzComponentParams: {
+        title: '',
+        subtitle: ''
+      },
+      nzOnOk: async () => {
+        console.log('hhhhhhh', instance.validateForm)
+        if (instance.validateForm.valid) {
+          await new Promise(resolve => {
+            let body = {
+
+            }
+            this.http.post('/api/services/app/User/Create', body).subscribe(data => {
+              resolve(data)
+              this.message.create('success', '创建成功！');
+              return true
+            }, err => {
+              resolve(err)
+              this.message.create('warning', '创建失败');
+              return false
+            })
+          })
+        } else {
+          this.message.create('warning', '请填写完整！');
+          return false
+        }
+      }
+    });
+    const instance = modal.getContentComponent();
+
+  }
+  editOr(node) {
+    console.log(node)
+    const modal = this.modal.create({
+      nzTitle: '编辑组织机构',
+      nzContent: EditorComponent,
+      nzViewContainerRef: this.viewContainerRef,
+      nzWidth: 288,
+      nzComponentParams: {
+        data: node,
+      },
+      nzOnOk: async () => {
+        console.log('hhhhhhh', instance.validateForm)
+        if (instance.validateForm.valid) {
+          await new Promise(resolve => {
+            let body = {
+
+            }
+            this.http.post('/api/services/app/User/Create', body).subscribe(data => {
+              resolve(data)
+              this.message.create('success', '编辑成功！');
+              return true
+            }, err => {
+              resolve(err)
+              this.message.create('warning', '创建失败');
+              return false
+            })
+          })
+        } else {
+          this.message.create('warning', '请填写完整！');
+          return false
+        }
+      }
+    });
+    const instance = modal.getContentComponent();
+  }
+  deleteOr(item) {
+    console.log(item)
+    this.modal.confirm({
+      nzTitle: `确定要删除${item.title}这个机构吗?`,
+      nzOkText: '确定',
+      nzOkType: 'danger',
+      nzOnOk: () => {
+        this.http.delete('/api/services/app/Role/Delete', {
+          params: {
+            Id: item.id
+          }
+        }).subscribe(data => {
+          this.message.create('success', '删除成功！');
+        })
+      },
+      nzCancelText: '取消',
+      nzOnCancel: () => {
+
+      }
+    });
+  }
 }
diff --git a/src/app/system-management/role/addrole/addrole.component.html b/src/app/system-management/role/addrole/addrole.component.html
new file mode 100644
index 0000000..1727024
--- /dev/null
+++ b/src/app/system-management/role/addrole/addrole.component.html
@@ -0,0 +1,21 @@
+<div class="box">
+  <form nz-form [formGroup]="validateForm">
+    <nz-form-item>
+      <nz-form-control nzErrorTip="请输入名称">
+        <nz-input-group>
+          <input nz-input type="text" formControlName="name" placeholder="请输入名称" />
+        </nz-input-group>
+      </nz-form-control>
+    </nz-form-item>
+    <nz-form-item>
+      <nz-form-control>
+        <nz-select formControlName="power" nzPlaceHolder="请选择权限" (nzScrollToBottom)="loadMore()" nzMode="multiple">
+          <nz-option *ngFor="let o of optionList" [nzValue]="o" [nzLabel]="o.displayName"></nz-option>
+        </nz-select>
+        <ng-template #renderTemplate>
+          <nz-spin *ngIf="isLoading"></nz-spin>
+        </ng-template>
+      </nz-form-control>
+    </nz-form-item>
+  </form>
+</div>
diff --git a/src/app/system-management/role/addrole/addrole.component.scss b/src/app/system-management/role/addrole/addrole.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/system-management/role/addrole/addrole.component.ts b/src/app/system-management/role/addrole/addrole.component.ts
new file mode 100644
index 0000000..030d7e4
--- /dev/null
+++ b/src/app/system-management/role/addrole/addrole.component.ts
@@ -0,0 +1,38 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { NzModalRef } from 'ng-zorro-antd/modal';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { HttpClient } from '@angular/common/http';
+@Component({
+  selector: 'app-addrole',
+  templateUrl: './addrole.component.html',
+  styleUrls: ['./addrole.component.scss']
+})
+export class AddroleComponent implements OnInit {
+
+  @Input() title?: string;
+  @Input() subtitle?: string;
+  validateForm!: FormGroup;
+  constructor(private modal: NzModalRef, private fb: FormBuilder, private http: HttpClient) { }
+
+  ngOnInit(): void {
+    this.loadMore();
+    this.validateForm = this.fb.group({
+      name: [null, [Validators.required]],
+      power: [null, [Validators.required]]
+    });
+  }
+  destroyModal(): void {
+    this.modal.destroy({ data: 'this the result data' });
+  }
+  optionList = [];
+  isLoading = false;
+  //获取权限列表
+  loadMore() {
+    this.isLoading = true;
+    this.http.get('/api/services/app/Role/GetAllPermissions').subscribe((data:any) => {
+      this.isLoading = false;
+      this.optionList = data.result.items
+      console.log('所有权限',data)
+    })
+  }
+}
diff --git a/src/app/system-management/role/editrole/editrole.component.html b/src/app/system-management/role/editrole/editrole.component.html
new file mode 100644
index 0000000..7db4fd5
--- /dev/null
+++ b/src/app/system-management/role/editrole/editrole.component.html
@@ -0,0 +1,18 @@
+<div class="box">
+  <form nz-form [formGroup]="validateForm">
+    <nz-form-item>
+      <nz-form-control nzErrorTip="请输入名称">
+        <nz-input-group>
+          <input [(ngModel)]="data.name" nz-input type="text" formControlName="name" placeholder="请输入名称" />
+        </nz-input-group>
+      </nz-form-control>
+    </nz-form-item>
+    <nz-form-item>
+      <nz-form-control>
+        <nz-select [(ngModel)]="multipleValue" formControlName="power" nzPlaceHolder="请选择权限" (nzScrollToBottom)="loadMore()" nzMode="multiple">
+          <nz-option *ngFor="let o of optionList" [nzValue]="o.name" [nzLabel]="o.displayName"></nz-option>
+        </nz-select>
+      </nz-form-control>
+    </nz-form-item>
+  </form>
+</div>
diff --git a/src/app/system-management/role/editrole/editrole.component.scss b/src/app/system-management/role/editrole/editrole.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/system-management/role/editrole/editrole.component.ts b/src/app/system-management/role/editrole/editrole.component.ts
new file mode 100644
index 0000000..2dae734
--- /dev/null
+++ b/src/app/system-management/role/editrole/editrole.component.ts
@@ -0,0 +1,38 @@
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Component, OnInit, Input } from '@angular/core';
+import { NzModalRef } from 'ng-zorro-antd/modal';
+import { HttpClient } from '@angular/common/http';
+@Component({
+  selector: 'app-editrole',
+  templateUrl: './editrole.component.html',
+  styleUrls: ['./editrole.component.scss']
+})
+export class EditroleComponent implements OnInit {
+
+  @Input() data?: any;
+  validateForm!: FormGroup;
+  constructor(private modal: NzModalRef, private fb: FormBuilder, private http: HttpClient) { }
+
+  multipleValue:any
+  ngOnInit(): void {
+    this.multipleValue = this.data.grantedPermissions
+    this.loadMore();
+    this.validateForm = this.fb.group({
+      name: [null, [Validators.required]],
+      power: [null, [Validators.required]]
+    });
+  }
+  destroyModal(): void {
+    this.modal.destroy({ data: 'this the result data' });
+  }
+  
+  optionList = [];
+  //获取权限列表
+  loadMore() {
+    this.http.get('/api/services/app/Role/GetAllPermissions').subscribe((data:any) => {
+      this.optionList = data.result.items
+      console.log('所有权限',data)
+    })
+  }
+
+}
diff --git a/src/app/system-management/role/role.component.html b/src/app/system-management/role/role.component.html
index ce1bd50..dd622e4 100644
--- a/src/app/system-management/role/role.component.html
+++ b/src/app/system-management/role/role.component.html
@@ -1 +1,38 @@
-<p>role works!</p>
+<div class="roleBox" id="roleBox">
+  <div class="topbox">
+    <div class="lefttop">
+      <span>角色列表</span>
+    </div>
+    <div class="righttop">
+      <button nz-button nzType="primary" (click)="addRole()"><i nz-icon nzType="plus-circle"
+          nzTheme="outline"></i>新增</button>
+    </div>
+  </div>
+  <div class="tablebox">
+    <nz-table #basicTable [nzData]="listOfData" [nzShowPagination]='false' [nzPageSize]='16'>
+      <thead>
+        <tr>
+          <th style="padding-left: 40px;">角色</th>
+          <th>权限</th>
+          <th>创建/修改时间</th>
+          <th>操作</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let data of basicTable.data">
+          <td>{{data.name}}</td>
+          <td>
+            <span *ngFor="let item of data.grantedFlatPermissions">{{item.displayName}}</span>
+          </td>
+          <td>
+            {{(data.lastModificationTime ? data.lastModificationTime : data.creationTime) | date:"yyyy-MM-dd HH:mm:ss"}}
+          </td>
+          <td class="operation">
+            <a (click)="edit(data)">编辑</a>
+            <a (click)="delete(data)">删除</a>
+          </td>
+        </tr>
+      </tbody>
+    </nz-table>
+  </div>
+</div>
diff --git a/src/app/system-management/role/role.component.scss b/src/app/system-management/role/role.component.scss
index e69de29..44dcc71 100644
--- a/src/app/system-management/role/role.component.scss
+++ b/src/app/system-management/role/role.component.scss
@@ -0,0 +1,54 @@
+.roleBox {
+  width: 100%;
+  height: 100%;
+  background: #FFFFFF;
+  box-sizing: border-box;
+  padding: 20px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  
+  tbody {
+    tr {
+      td {
+        span {
+          margin-right: 18px;
+        }
+      }
+      td:nth-child(1){
+        padding-left: 40px;
+      }
+    }
+    .operation {
+      a {
+        color: #2399FF;
+        margin-right: 8px;
+      }
+      a:last-child {
+        color: rgba(0, 13, 33, 0.48);
+      }
+    }
+
+  }
+}
+
+.topbox {
+  width: 100%;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+
+  .lefttop {
+    span {
+      color: #000D21;
+    }
+  }
+}
+
+.tablebox {
+  flex: 1;
+  overflow-y: auto;
+  
+}
diff --git a/src/app/system-management/role/role.component.ts b/src/app/system-management/role/role.component.ts
index dbd7a84..41abbde 100644
--- a/src/app/system-management/role/role.component.ts
+++ b/src/app/system-management/role/role.component.ts
@@ -1,5 +1,11 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { NzModalService } from 'ng-zorro-antd/modal';
 
+import { NzMessageService } from 'ng-zorro-antd/message';
+import { HttpClient } from '@angular/common/http';
+import { AddroleComponent } from './addrole/addrole.component';
+import { EditroleComponent } from './editrole/editrole.component';
 @Component({
   selector: 'app-role',
   templateUrl: './role.component.html',
@@ -7,9 +13,126 @@ import { Component, OnInit } from '@angular/core';
 })
 export class RoleComponent implements OnInit {
 
-  constructor() { }
+
+  constructor(private modal: NzModalService, private viewContainerRef: ViewContainerRef, private message: NzMessageService, private http: HttpClient) { }
 
   ngOnInit(): void {
+    this.getAllRoles()
+  }
+
+  listOfData: any[] = [];
+
+  //获取角色列表
+
+  getAllRoles() {
+    this.http.get('/api/services/app/Role/GetAll').subscribe((data: any) => {
+      console.log('角色列表', data.result.items)
+      this.listOfData = data.result.items
+    })
+  }
+
+  addRole(): void {
+    const modal = this.modal.create({
+      nzTitle: '新增角色',
+      nzContent: AddroleComponent,
+      nzViewContainerRef: this.viewContainerRef,
+      nzWidth: 288,
+      nzComponentParams: {},
+      nzOnOk: async () => {
+        if (instance.validateForm.valid) {
+          await new Promise(resolve => {
+            console.log('表单信息', instance.validateForm)
+            let arr = []
+            instance.validateForm.value.power.forEach(element => {
+              arr.push(element.name)
+            });
+            let body = {
+              name: instance.validateForm.value.name,
+              DisplayName: instance.validateForm.value.name,
+              grantedPermissions: arr
+            }
+            this.http.post('/api/services/app/Role/Create', body).subscribe(data => {
+              resolve(data)
+              this.message.create('success', '创建成功！');
+              this.getAllRoles()
+              return true
+            })
+          })
+        } else {
+          this.message.create('warning', '请填写完整！');
+          return false
+        }
+      }
+    });
+    const instance = modal.getContentComponent();
+    modal.afterOpen.subscribe(() => console.log('[afterOpen] emitted!'));
+    // Return a result when closed
+    modal.afterClose.subscribe(result => console.log('[afterClose] The result is:', result));
+  }
+
+
+  edit(item) {
+    const modal = this.modal.create({
+      nzTitle: '编辑角色',
+      nzContent: EditroleComponent,
+      nzViewContainerRef: this.viewContainerRef,
+      nzWidth: 288,
+      nzComponentParams: {
+        data: item
+      },
+      nzOnOk: async () => {
+        if (instance.validateForm.valid) {
+          await new Promise(resolve => {
+            console.log('表单信息', instance.validateForm)
+            let arr = []
+            instance.validateForm.value.power.forEach(element => {
+              arr.push(element.name ? element.name : element)
+            });
+            let body = {
+              id: item.id,
+              name: instance.validateForm.value.name,
+              DisplayName: instance.validateForm.value.name,
+              grantedPermissions: arr
+            }
+            this.http.put('/api/services/app/Role/Update', body).subscribe(data => {
+              resolve(data)
+              this.message.create('success', '修改成功！');
+              this.getAllRoles()
+              return true
+            })
+          })
+        } else {
+          this.message.create('warning', '请填写完整！');
+          return false
+        }
+      }
+    });
+    const instance = modal.getContentComponent();
+    modal.afterOpen.subscribe(() => console.log('[afterOpen] emitted!'));
+    // Return a result when closed
+    modal.afterClose.subscribe(result => console.log('[afterClose] The result is:', result));
   }
 
+  delete(item) {
+    console.log(item)
+    this.modal.confirm({
+      nzTitle: `确定要删除${item.name}这个角色吗?`,
+      nzOkText: '确定',
+      nzOkType: 'danger',
+      nzOnOk: () => {
+        this.http.delete('/api/services/app/Role/Delete', {
+          params: {
+            Id: item.id
+          }
+        }).subscribe(data => {
+          this.message.create('success', '删除成功！');
+          this.getAllRoles()
+        })
+      },
+      nzCancelText: '取消',
+      nzOnCancel: () => {
+
+      }
+    });
+  }
 }
diff --git a/src/app/system-management/system-management-routing.module.ts b/src/app/system-management/system-management-routing.module.ts
index 54f7104..843186b 100644
--- a/src/app/system-management/system-management-routing.module.ts
+++ b/src/app/system-management/system-management-routing.module.ts
@@ -1,14 +1,15 @@
 import { Routes, RouterModule } from '@angular/router';
 import { NgModule } from '@angular/core';
 
-import {AuthGuard} from '../auth.guard'
+import { AuthGuard } from '../auth.guard'
+import { RoleComponent } from './role/role.component';
+import { OrganizationComponent } from './organization/organization.component';
+import { UserComponent } from './user/user.component';
 
 const routes: Routes = [
-    // { path: 'plan', component: PlanComponent },
-    // { path: 'warning/petrolStation', component: TodayWarningComponent },
-    // { path: 'warning/admin', component: TodayWarningAdminComponent },
-    // { path: 'records/petrolStation', component: CriminalRecordsComponent },
-    // { path: 'records/admin', component: CriminalRecordsAdminComponent }
+    { path: 'organization', component: OrganizationComponent },
+    { path: 'user', component: UserComponent },
+    { path: 'role', component: RoleComponent }
 ];
 
 @NgModule({
diff --git a/src/app/system-management/system-management.module.ts b/src/app/system-management/system-management.module.ts
index a757a84..870c5a5 100644
--- a/src/app/system-management/system-management.module.ts
+++ b/src/app/system-management/system-management.module.ts
@@ -5,14 +5,50 @@ import { OrganizationComponent } from './organization/organization.component';
 import { UserComponent } from './user/user.component';
 import { RoleComponent } from './role/role.component';
 import { NavigationComponent } from './navigation/navigation.component';
-
-
-
+import { NzLayoutModule } from 'ng-zorro-antd/layout';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzTableModule } from 'ng-zorro-antd/table';
+import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
+import { NzPaginationModule } from 'ng-zorro-antd/pagination';
+import { NzInputModule } from 'ng-zorro-antd/input';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzFormModule } from 'ng-zorro-antd/form';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { NzModalModule } from 'ng-zorro-antd/modal';
+import { AdduserComponent } from './user/adduser/adduser.component';
+import { EdituserComponent } from './user/edituser/edituser.component';
+import { NzSelectModule } from 'ng-zorro-antd/select';
+import { NzMessageModule } from 'ng-zorro-antd/message';
+import { NzTreeModule } from 'ng-zorro-antd/tree';
+import { AddroleComponent } from './role/addrole/addrole.component';
+import { EditroleComponent } from './role/editrole/editrole.component';
+import { NzSpinModule } from 'ng-zorro-antd/spin';
+import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select';
+import { AddorComponent } from './organization/addor/addor.component';
+import { EditorComponent } from './organization/editor/editor.component';
 @NgModule({
-  declarations: [OrganizationComponent, UserComponent, RoleComponent, NavigationComponent],
+  declarations: [OrganizationComponent, UserComponent, RoleComponent, NavigationComponent, AdduserComponent, EdituserComponent, AddroleComponent, EditroleComponent, AddorComponent, EditorComponent],
   imports: [
     CommonModule,
-    SystemRoutingModule
-  ]
+    SystemRoutingModule,
+    NzLayoutModule,
+    NzIconModule,
+    NzTableModule,
+    NzDropDownModule,
+    NzPaginationModule,
+    NzInputModule,
+    NzButtonModule,
+    NzFormModule,
+    FormsModule,
+    ReactiveFormsModule,
+    NzModalModule,
+    NzSelectModule,
+    NzMessageModule,
+    NzTreeModule,
+    NzSpinModule,
+    NzTreeSelectModule
+  ],
+  entryComponents :[AdduserComponent,EdituserComponent,AddroleComponent,EditroleComponent,AddorComponent,EditorComponent]
+  
 })
 export class SystemManagementModule { }
diff --git a/src/app/system-management/user/adduser/adduser.component.html b/src/app/system-management/user/adduser/adduser.component.html
new file mode 100644
index 0000000..954b570
--- /dev/null
+++ b/src/app/system-management/user/adduser/adduser.component.html
@@ -0,0 +1,39 @@
+<div class="box">
+  <form nz-form [formGroup]="validateForm">
+    <nz-form-item>
+      <nz-form-control>
+        <nz-input-group>
+          <input nz-input type="text" formControlName="account" placeholder="请输入账号" />
+        </nz-input-group>
+      </nz-form-control>
+    </nz-form-item>
+    <nz-form-item>
+      <nz-form-control>
+        <nz-input-group>
+          <input nz-input type="text" formControlName="name" placeholder="请输入姓名" />
+        </nz-input-group>
+      </nz-form-control>
+    </nz-form-item>
+    <nz-form-item>
+      <nz-form-control>
+        <nz-tree-select formControlName="organization" [nzNodes]="nodes" nzPlaceHolder="请选择所属机构">
+          
+        </nz-tree-select>
+      </nz-form-control>
+    </nz-form-item>
+    <nz-form-item>
+      <nz-form-control>
+        <nz-select formControlName="role" nzPlaceHolder="请选择角色" nzMode="multiple">
+          <nz-option *ngFor="let item of listOfData" [nzValue]="item.name" [nzLabel]="item.displayName"></nz-option>
+        </nz-select>
+      </nz-form-control>
+    </nz-form-item>
+    <nz-form-item>
+      <nz-form-control>
+        <nz-input-group>
+          <input nz-input type="text" formControlName="phonenum" placeholder="请输入手机号" />
+        </nz-input-group>
+      </nz-form-control>
+    </nz-form-item>
+  </form>
+</div>
diff --git a/src/app/system-management/user/adduser/adduser.component.scss b/src/app/system-management/user/adduser/adduser.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/system-management/user/adduser/adduser.component.ts b/src/app/system-management/user/adduser/adduser.component.ts
new file mode 100644
index 0000000..290dbbc
--- /dev/null
+++ b/src/app/system-management/user/adduser/adduser.component.ts
@@ -0,0 +1,54 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { NzModalRef } from 'ng-zorro-antd/modal';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { HttpClient } from '@angular/common/http';
+import { TreeService } from 'src/app/service/tree.service';
+@Component({
+  selector: 'app-adduser',
+  templateUrl: './adduser.component.html',
+  styleUrls: ['./adduser.component.scss']
+})
+export class AdduserComponent implements OnInit {
+
+  @Input() title?: string;
+  @Input() subtitle?: string;
+  validateForm!: FormGroup;
+  constructor(private modal: NzModalRef, private fb: FormBuilder, private http: HttpClient, private toTree: TreeService) { }
+
+  ngOnInit(): void {
+    this.validateForm = this.fb.group({
+      account: [null, [Validators.required]],
+      name: [null, [Validators.required]],
+      organization: [null, [Validators.required]],
+      role: [null, [Validators.required]],
+      phonenum: [null, [Validators.required]]
+    });
+
+    this.getAllRoles()
+    this.getAllOrganization()
+  }
+  destroyModal(): void {
+    this.modal.destroy({ data: 'this the result data' });
+  }
+
+  listOfData: any[] = [];
+
+  //获取角色列表
+  getAllRoles() {
+    this.http.get('/api/services/app/Role/GetAll').subscribe((data: any) => {
+      console.log('角色列表', data.result.items)
+      this.listOfData = data.result.items
+    })
+  }
+  //获取所有组织机构
+  nodes:any = []
+  getAllOrganization() {
+    this.http.get('/api/services/app/Organization/GetAll').subscribe((data: any) => {
+      data.result.items.forEach(element => {
+        element.key = element.code
+        element.title = element.displayName
+      });
+      this.nodes = [...this.toTree.toTree(data.result.items)]
+    })
+  }
+}
diff --git a/src/app/system-management/user/edituser/edituser.component.html b/src/app/system-management/user/edituser/edituser.component.html
new file mode 100644
index 0000000..dc1a983
--- /dev/null
+++ b/src/app/system-management/user/edituser/edituser.component.html
@@ -0,0 +1,39 @@
+<div class="box">
+  <form nz-form [formGroup]="validateForm">
+    <nz-form-item>
+      <nz-form-control>
+        <nz-input-group>
+          <input [(ngModel)]="data.userName" nz-input type="text" formControlName="account" placeholder="请输入账号" />
+        </nz-input-group>
+      </nz-form-control>
+    </nz-form-item>
+    <nz-form-item>
+      <nz-form-control>
+        <nz-input-group>
+          <input [(ngModel)]="data.name" nz-input type="text" formControlName="name" placeholder="请输入姓名" />
+        </nz-input-group>
+      </nz-form-control>
+    </nz-form-item>
+    <nz-form-item>
+      <nz-form-control>
+        <nz-tree-select [(ngModel)]="data.organizationId" formControlName="organization" [nzNodes]="nodes" nzPlaceHolder="请选择所属机构">
+
+        </nz-tree-select>
+      </nz-form-control>
+    </nz-form-item>
+    <nz-form-item>
+      <nz-form-control>
+        <nz-select [(ngModel)]="data.roleNames" formControlName="role" nzPlaceHolder="请选择角色" nzMode="multiple">
+          <nz-option *ngFor="let item of listOfData" [nzValue]="item.name" [nzLabel]="item.displayName"></nz-option>
+        </nz-select>
+      </nz-form-control>
+    </nz-form-item>
+    <nz-form-item>
+      <nz-form-control>
+        <nz-input-group>
+          <input [(ngModel)]="data.phoneNumber" nz-input type="text" formControlName="phonenum" placeholder="请输入手机号" />
+        </nz-input-group>
+      </nz-form-control>
+    </nz-form-item>
+  </form>
+</div>
diff --git a/src/app/system-management/user/edituser/edituser.component.scss b/src/app/system-management/user/edituser/edituser.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/system-management/user/edituser/edituser.component.ts b/src/app/system-management/user/edituser/edituser.component.ts
new file mode 100644
index 0000000..89b8f2b
--- /dev/null
+++ b/src/app/system-management/user/edituser/edituser.component.ts
@@ -0,0 +1,57 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { NzModalRef } from 'ng-zorro-antd/modal';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { HttpClient } from '@angular/common/http';
+import { TreeService } from 'src/app/service/tree.service';
+
+@Component({
+  selector: 'app-edituser',
+  templateUrl: './edituser.component.html',
+  styleUrls: ['./edituser.component.scss']
+})
+export class EdituserComponent implements OnInit {
+
+  @Input() data?: any;
+  validateForm!: FormGroup;
+  constructor(private modal: NzModalRef, private fb: FormBuilder, private http: HttpClient, private toTree: TreeService) { }
+
+  ngOnInit(): void {
+    this.validateForm = this.fb.group({
+      account: [null, [Validators.required]],
+      name: [null, [Validators.required]],
+      organization: [null, [Validators.required]],
+      role: [null, [Validators.required]],
+      phonenum: [null, [Validators.required]]
+    });
+
+
+    console.log(this.data)
+    this.getAllRoles()
+    this.getAllOrganization()
+  }
+  destroyModal(): void {
+    this.modal.destroy({ data: 'this the result data' });
+  }
+
+  listOfData: any[] = [];
+
+  //获取角色列表
+  getAllRoles() {
+    this.http.get('/api/services/app/Role/GetAll').subscribe((data: any) => {
+      console.log('角色列表', data.result.items)
+      this.listOfData = data.result.items
+    })
+  }
+  //获取所有组织机构
+  nodes:any = []
+  getAllOrganization() {
+    this.http.get('/api/services/app/Organization/GetAll').subscribe((data: any) => {
+      data.result.items.forEach(element => {
+        element.key = element.code
+        element.title = element.displayName
+      });
+      this.nodes = [...this.toTree.toTree(data.result.items)]
+    })
+  }
+
+}
diff --git a/src/app/system-management/user/user.component.html b/src/app/system-management/user/user.component.html
index d039bb7..22c1157 100644
--- a/src/app/system-management/user/user.component.html
+++ b/src/app/system-management/user/user.component.html
@@ -1 +1,63 @@
-<p>user works!</p>
+<div class="userBox" id="userBox">
+  <div class="topbox">
+    <div class="lefttop">
+      <span>用户列表</span>
+      <span><i nz-icon nzType="search"></i> {{usersNum}}名用户</span>
+    </div>
+    <div class="righttop">
+      <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
+        <nz-form-item>
+          <nz-form-control>
+            <nz-input-group nzPrefixIcon="search">
+              <input type="text" nz-input placeholder="请输入用户名" formControlName="search" />
+            </nz-input-group>
+          </nz-form-control>
+          <button style="display: none;" type="submit"></button>
+        </nz-form-item>
+      </form>
+      <button nz-button nzType="primary" (click)="addUser()"><i nz-icon nzType="plus-circle"
+          nzTheme="outline"></i>新增</button>
+    </div>
+  </div>
+  <div class="tablebox">
+    <nz-table #basicTable [nzData]="usersLIst" [nzShowPagination]='false' [nzPageSize]='16'>
+      <thead>
+        <tr>
+          <th></th>
+          <th>账号</th>
+          <th>姓名</th>
+          <th>角色</th>
+          <th>所属机构</th>
+          <th>操作</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let data of basicTable.data">
+          <td><img src="../../../assets/images/user.png" alt=""></td>
+          <td>{{ data.userName }}</td>
+          <td>{{ data.name }}</td>
+          <td>
+            <span *ngFor="let item of data.roleNames">{{item}}</span>
+          </td>
+          <td>
+            <div class="ortype">
+              自营
+            </div>
+            {{data.organization}}
+          </td>
+          <td class="operation">
+            <a (click)="editUser(data)">编辑</a>
+            <a (click)="resetPassword(data)">重置密码</a>
+            <a (click)="delete(data)">删除</a>
+          </td>
+        </tr>
+      </tbody>
+    </nz-table>
+  </div>
+  <div class="pagination">
+    <nz-pagination [nzHideOnSinglePage]="true" [nzPageIndex]="1" [nzTotal]="usersNum" [nzPageSize]="1"
+      [nzShowTotal]="totalTemplate" nzShowQuickJumper (nzPageIndexChange)="pageChange($event)">
+    </nz-pagination>
+    <ng-template #totalTemplate let-total> 16条/页,共{{usersNum}}条 </ng-template>
+  </div>
+</div>
diff --git a/src/app/system-management/user/user.component.scss b/src/app/system-management/user/user.component.scss
index e69de29..2cf35a9 100644
--- a/src/app/system-management/user/user.component.scss
+++ b/src/app/system-management/user/user.component.scss
@@ -0,0 +1,87 @@
+.userBox {
+  width: 100%;
+  height: 100%;
+  background: #FFFFFF;
+  box-sizing: border-box;
+  padding: 20px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  thead {}
+
+  tbody {
+    tr {
+      td:nth-child(1) {
+        text-align: right;
+      }
+    }
+
+    .operation {
+      a {
+        color: #2399FF;
+        margin-right: 18px;
+      }
+
+      a:last-child {
+        color: rgba(0, 13, 33, 0.48);
+      }
+    }
+  }
+}
+
+.topbox {
+  width: 100%;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+
+  .lefttop {
+    span:nth-child(1) {
+      color: #000D21;
+      margin-right: 16px;
+    }
+
+    span:nth-child(2) {
+      color: rgba(36, 36, 36, 0.24);
+    }
+  }
+
+  .righttop {
+    display: flex;
+
+    button {
+      margin-left: 16px;
+    }
+
+    nz-input-group {
+      height: 32px;
+    }
+  }
+}
+
+.tablebox {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.pagination {
+  margin: 15px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ortype {
+  width: 36px;
+  height: 20px;
+  background: #2399FF;
+  opacity: 1;
+  border-radius: 2px;
+  font-size: 12px;
+  margin-right: 8px;
+  color: #fff;
+  text-align: center;
+}
diff --git a/src/app/system-management/user/user.component.ts b/src/app/system-management/user/user.component.ts
index 5df0c83..955db12 100644
--- a/src/app/system-management/user/user.component.ts
+++ b/src/app/system-management/user/user.component.ts
@@ -1,15 +1,193 @@
-import { Component, OnInit } from '@angular/core';
-
+import { Component, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { NzModalService } from 'ng-zorro-antd/modal';
+import { AdduserComponent } from './adduser/adduser.component';
+import { NzMessageService } from 'ng-zorro-antd/message';
+import { HttpClient } from '@angular/common/http';
+import { EdituserComponent } from './edituser/edituser.component';
 @Component({
   selector: 'app-user',
   templateUrl: './user.component.html',
   styleUrls: ['./user.component.scss']
 })
 export class UserComponent implements OnInit {
-
-  constructor() { }
+  validateForm!: FormGroup;
+  constructor(private fb: FormBuilder, private modal: NzModalService, private viewContainerRef: ViewContainerRef, private message: NzMessageService, private http: HttpClient) { }
 
   ngOnInit(): void {
+    this.validateForm = this.fb.group({
+      search: [null]
+    });
+    this.getAllUsers()
+  }
+
+
+  //获取所有用户
+  usersLIst: any = []
+  usersNum:string
+
+  SkipCount: number = 0  //0 16 32 48
+  MaxResultCount: number = 16
+  getAllUsers() {
+    let params = {
+      SkipCount: String(this.SkipCount),
+      MaxResultCount: String(this.MaxResultCount)
+    }
+    this.http.get('/api/services/app/User/GetAll', {
+      params: params
+    }).subscribe((data: any) => {
+      this.usersLIst = data.result.items
+      this.usersNum = data.result.totalCount
+      console.log('所有用户', this.usersLIst)
+    })
   }
 
+  pageChange($event){
+    console.log('页码改变',$event)
+  }
+
+
+
+  //搜索框提交
+  submitForm(): void {
+    console.log(12345)
+    for (const i in this.validateForm.controls) {
+      this.validateForm.controls[i].markAsDirty();
+      this.validateForm.controls[i].updateValueAndValidity();
+    }
+  }
+
+  //新增用户
+  addUser(): void {
+    const modal = this.modal.create({
+      nzTitle: '新增用户',
+      nzContent: AdduserComponent,
+      nzViewContainerRef: this.viewContainerRef,
+      nzWidth: 288,
+      nzComponentParams: {
+        title: '',
+        subtitle: ''
+      },
+      nzOnOk: async () => {
+        console.log('hhhhhhh', instance.validateForm)
+        if (instance.validateForm.valid) {
+          await new Promise(resolve => {
+            let body = {
+              userName: instance.validateForm.value.account,
+              name: instance.validateForm.value.name,
+              organizationId: instance.validateForm.value.organization,
+              roleNames: instance.validateForm.value.role,
+              phoneNumber: instance.validateForm.value.phonenum,
+              isActive: true
+            }
+            this.http.post('/api/services/app/User/Create', body).subscribe(data => {
+              resolve(data)
+              this.message.create('success', '创建成功！');
+              this.getAllUsers()
+              return true
+            }, err => {
+              resolve(err)
+              this.message.create('warning', '创建失败');
+              return false
+            })
+          })
+        } else {
+          this.message.create('warning', '请填写完整！');
+          return false
+        }
+      }
+    });
+    const instance = modal.getContentComponent();
+    modal.afterOpen.subscribe(() => console.log('[afterOpen] emitted!'));
+    // Return a result when closed
+    modal.afterClose.subscribe(result => console.log('[afterClose] The result is:', result));
+  }
+
+  //编辑用户
+  editUser(data): void {
+    const modal = this.modal.create({
+      nzTitle: '编辑用户',
+      nzContent: EdituserComponent,
+      nzViewContainerRef: this.viewContainerRef,
+      nzWidth: 288,
+      nzComponentParams: {
+        data: data,
+      },
+      nzOnOk: async () => {
+        console.log('hhhhhhh', instance.validateForm)
+        if (instance.validateForm.valid) {
+          await new Promise(resolve => {
+            let body = {
+              userName: instance.validateForm.value.account,
+              name: instance.validateForm.value.name,
+              organizationId: instance.validateForm.value.organization,
+              roleNames: instance.validateForm.value.role,
+              phoneNumber: instance.validateForm.value.phonenum,
+              isActive: true
+            }
+            this.http.post('/api/services/app/User/Create', body).subscribe(data => {
+              resolve(data)
+              this.message.create('success', '创建成功！');
+              this.getAllUsers()
+              return true
+            }, err => {
+              resolve(err)
+              this.message.create('warning', '创建失败');
+              return false
+            })
+          })
+        } else {
+          this.message.create('warning', '请填写完整！');
+          return false
+        }
+      }
+    });
+    const instance = modal.getContentComponent();
+  }
+
+  //重置密码
+  resetPassword(item) {
+    this.modal.confirm({
+      nzTitle: `确定要重置${item.userName}这个账户的密码吗?`,
+      nzOkText: '确定',
+      nzOkType: 'primary',
+      nzOnOk: () => {
+        this.http.delete('/api/services/app/Role/Delete', {
+          params: {
+            Id: item.id
+          }
+        }).subscribe(data => {
+          this.message.create('success', '重置成功！');
+          this.getAllUsers()
+        })
+      },
+      nzCancelText: '取消',
+      nzOnCancel: () => {
+
+      }
+    });
+  }
+
+  //删除
+  delete(item) {
+    this.modal.confirm({
+      nzTitle: `确定要删除${item.userName}这个账户吗?`,
+      nzOkText: '确定',
+      nzOkType: 'danger',
+      nzOnOk: () => {
+        this.http.delete('/api/services/app/Role/Delete', {
+          params: {
+            Id: item.id
+          }
+        }).subscribe(data => {
+          this.message.create('success', '删除成功！');
+          this.getAllUsers()
+        })
+      },
+      nzCancelText: '取消',
+      nzOnCancel: () => {
+
+      }
+    });
+  }
 }
diff --git a/src/app/ui/tabbar/tabbar.component.html b/src/app/ui/tabbar/tabbar.component.html
index 15c0c56..523028d 100644
--- a/src/app/ui/tabbar/tabbar.component.html
+++ b/src/app/ui/tabbar/tabbar.component.html
@@ -16,7 +16,9 @@
     </a>
     <nz-dropdown-menu #menu="nzDropdownMenu">
       <ul nz-menu nzSelectable>
-        <li nz-menu-item (click)="system()">系统管理</li>
+        <li nz-menu-item (click)="navChange('/home/oliStationInfo')">基本信息</li>
+        <li nz-menu-item (click)="navChange('/home/equipmentInfo')">器材信息</li>
+        <li nz-menu-item (click)="navChange('/system/organization')">系统管理</li>
         <li nz-menu-item (click)="signOut()">退出系统</li>
       </ul>
     </nz-dropdown-menu>
diff --git a/src/app/ui/tabbar/tabbar.component.ts b/src/app/ui/tabbar/tabbar.component.ts
index 5d2dada..776f81d 100644
--- a/src/app/ui/tabbar/tabbar.component.ts
+++ b/src/app/ui/tabbar/tabbar.component.ts
@@ -59,9 +59,12 @@ export class TabbarComponent implements OnInit {
     this.cookieService.set("refreshToken", '', new Date(new Date().getTime() + 1), '/');
     this.router.navigate(['/login'])
   }
-  system(){
-    this.router.navigate(['/system'])
+
+  navChange(router){
+    this.router.navigate([router])
   }
+
+  
   //修改密码
   changpsw() {
     // let dialogRef = this.dialog.open(ChangepasswordComponent, { width: '348.000051px' });
diff --git a/src/assets/images/icon/admin.png b/src/assets/images/icon/admin.png
new file mode 100644
index 0000000..f7f11ef
Binary files /dev/null and b/src/assets/images/icon/admin.png differ
diff --git a/src/assets/images/icon/organization.png b/src/assets/images/icon/organization.png
new file mode 100644
index 0000000..6fc46c2
Binary files /dev/null and b/src/assets/images/icon/organization.png differ
diff --git a/src/assets/images/icon/orgrey.png b/src/assets/images/icon/orgrey.png
new file mode 100644
index 0000000..b29d3f9
Binary files /dev/null and b/src/assets/images/icon/orgrey.png differ
diff --git a/src/assets/images/icon/power.png b/src/assets/images/icon/power.png
new file mode 100644
index 0000000..d9e9600
Binary files /dev/null and b/src/assets/images/icon/power.png differ
diff --git a/src/assets/images/icon/role.png b/src/assets/images/icon/role.png
new file mode 100644
index 0000000..9ec88e9
Binary files /dev/null and b/src/assets/images/icon/role.png differ
diff --git a/src/assets/images/icon/user.png b/src/assets/images/icon/user.png
new file mode 100644
index 0000000..6962ffd
Binary files /dev/null and b/src/assets/images/icon/user.png differ
diff --git a/src/assets/images/user.png b/src/assets/images/user.png
new file mode 100644
index 0000000..95dd792
Binary files /dev/null and b/src/assets/images/user.png differ
diff --git a/src/assets/images/userbig.png b/src/assets/images/userbig.png
new file mode 100644
index 0000000..e3a8388
Binary files /dev/null and b/src/assets/images/userbig.png differ
diff --git a/src/styles.scss b/src/styles.scss
index 92c1a83..f53bed5 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -102,15 +102,5 @@ h1 {
   font-size: 16px;
 }
 
-//滚动条样式
-::-webkit-scrollbar {
-  width: 10px;
-}
-::-webkit-scrollbar-thumb {
-  background-image: linear-gradient(#2495f8, #1c73c2,#0a3d6a, #061d3c);
-}
-::-webkit-scrollbar-track {
-  background-color: #061d3c;
-}
 
 
diff --git a/src/theme.less b/src/theme.less
index 6c9653c..88ed239 100644
--- a/src/theme.less
+++ b/src/theme.less
@@ -1,59 +1,29 @@
 @import "../node_modules/ng-zorro-antd/ng-zorro-antd.less";
 
-// @component-background: #002552;
-
-
-
-@border-color-base: #91CCFF;
-
-@select-background: transparent;
-
-.ant-select-single:not(.ant-select-customize-input) .ant-select-selector,
-.ant-picker,
-.ant-btn {
-  border-radius: 0px;
-}
-.ant-btn:hover, .ant-btn:focus, .ant-btn:active, .ant-btn.active{
-  // background: #083461;
-}
-//select picker 小剪头
-.ant-select-arrow,
-.ant-picker-separator {
-  color: #36A2FF;
-}
-
-//日期选择器
-@input-placeholder-color: #345d85;
-
-.ant-picker-suffix,
-.ant-picker-input>input {
-  color: rgba(145, 204, 255, 0.95);
-}
 
 
+//分页器
+#recordsboxadmin,
+#recordsbox {
 
-//弹窗遮罩层
-.ant-modal-mask {
-  background: rgba(0, 0, 0, 0.05);
-}
+  .ant-pagination-total-text,
+  .ant-pagination-options-quick-jumper {
+    color: white
+  }
 
-//分页器
-.ant-pagination-total-text,
-.ant-pagination-options-quick-jumper {
-  color: white
-}
+  .ant-pagination-item a,
+  .ant-pagination-prev .ant-pagination-item-link,
+  .ant-pagination-next .ant-pagination-item-link,
+  .ant-pagination-options-quick-jumper input {
+    color: white;
+    background: #0e2f4e;
+  }
 
-.ant-pagination-item a,
-.ant-pagination-prev .ant-pagination-item-link,
-.ant-pagination-next .ant-pagination-item-link,
-.ant-pagination-options-quick-jumper input {
-  color: white;
-  background: #0e2f4e;
+  .ant-pagination-item-active a {
+    background: #107495;
+  }
 }
 
-.ant-pagination-item-active a {
-  background: #107495;
-}
 
 
 //查询重置按钮
@@ -156,3 +126,111 @@
     -webkit-font-size: 16px !important;
   }
 }
+
+//表格
+#userBox,
+#roleBox {
+  .ant-table-thead>tr>th {
+    background: rgba(145, 204, 255, 0.15);
+  }
+}
+
+@select-background: transparent;
+@border-color-base: #91CCFF;
+
+//日期选择器
+// @input-placeholder-color: #345d85;
+#recordsboxadmin,
+#recordsbox,
+#warningbox,
+#warningboxadmin {
+  ::-webkit-input-placeholder {
+    /* WebKit browsers */
+    color: #345d85;
+  }
+
+  //滚动条样式
+  ::-webkit-scrollbar {
+    width: 10px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-image: linear-gradient(#2495f8, #1c73c2, #0a3d6a, #061d3c);
+  }
+
+  ::-webkit-scrollbar-track {
+    background-color: #061d3c;
+  }
+
+
+
+
+  .ant-select-single:not(.ant-select-customize-input) .ant-select-selector,
+  .ant-picker,
+  .ant-btn {
+    border-radius: 0px;
+  }
+
+  //select picker 小剪头
+  .ant-select-arrow,
+  .ant-picker-separator {
+    color: #36A2FF;
+  }
+
+  //日期选择器
+  // @input-placeholder-color: #345d85;
+
+  .ant-picker-suffix,
+  .ant-picker-input>input {
+    color: rgba(145, 204, 255, 0.95);
+  }
+
+
+  //弹窗遮罩层
+  .ant-modal-mask {
+    background: rgba(0, 0, 0, 0.05);
+  }
+
+  //遮罩层
+  .vertical-center-modal {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .ant-modal-body {
+    background: #072549;
+    height: 660px;
+    padding: 5px;
+    // border: 1px solid #8eb9e3;
+    box-shadow: 0 0 3px #8eb9e3;
+    color: #fff;
+  }
+
+  .ant-modal-close-x {
+    width: 36px;
+    height: 36px;
+    line-height: 36px;
+    color: white;
+  }
+
+  .vertical-center-modal .ant-modal {
+    top: 0;
+  }
+}
+
+// //弹窗遮罩层
+// .ant-modal-mask {
+//   background: rgba(0, 0, 0, 0.05);
+// }
+
+
+#orbox {
+  nz-tree {
+    width: 660px;
+  }
+
+  nz-tree-node {
+    position: relative;
+  }
+}