[新增]菜单完善

src/app/home/basic-info/basic-info.component.html

@@ -1,10 +1,15 @@
 <div class="box">
     <div class="nav">
         <ul>
-            <li [routerLink]="['/basicInfo/unit']" routerLinkActive="router-link-active">基本信息</li>
+            <li [routerLink]="['/basicInfo/unit']" routerLinkActive="router-link-active">
+                <i nz-icon nzType="audit" nzTheme="outline"></i>
+                基本信息
+            </li>
         </ul>
     </div>
     <div class="content">
-        <router-outlet></router-outlet>
+        <div class="routerbox">
+            <router-outlet></router-outlet>
+        </div>
     </div>
 </div>

src/app/home/basic-info/basic-info.component.scss

@@ -4,33 +4,47 @@
 
 
 .nav {
-  width: 200px;
+  width: 210px;
   height: 100%;
   background: #2c4dc1;
 
   ul {
     li {
-      height: 48px;
-      line-height: 48px;
+      height: 50px;
+      line-height: 50px;
       cursor: pointer;
+      text-align: left;
+
+      i {
+        margin: 0 8px 0 28px;
+      }
     }
   }
 }
 
 .router-link-active {
   background: #fff;
+  color: #2C4DC0;
 }
 
 .content {
   flex: 1;
 }
 
-.router-link-active {
-  color: black;
-}
 
 .content {
   box-sizing: border-box;
-  padding: 8px;
+  padding: 16px;
   background: #F6F5F8;
+
+  .routerbox {
+    width: 100%;
+    height: 100%;
+    background: #FFFFFF;
+    box-shadow: 0px 3px 8px 1px rgba(0, 0, 0, 0.0800);
+    border-radius: 4px 4px 4px 4px;
+    opacity: 1;
+    border: 1px solid #E4E7EC;
+    overflow-y: auto;
+  }
 }

src/app/home/home-routing.module.ts

@@ -8,7 +8,15 @@ import { OrComponent } from './system-management/or/or.component';
 import { RoleComponent } from './system-management/role/role.component';
 import { SystemManagementComponent } from './system-management/system-management.component';
 import { UserComponent } from './system-management/user/user.component';
+import { DaMonthlyTaskOverviewComponent } from './task/da-monthly-task-overview/da-monthly-task-overview.component';
+import { DaOneselfPlanComponent } from './task/da-oneself-plan/da-oneself-plan.component';
+import { DaSubordinateAuditComponent } from './task/da-subordinate-audit/da-subordinate-audit.component';
+import { StationTaskApplyComponent } from './task/station-task-apply/station-task-apply.component';
+import { StationTaskExecutionComponent } from './task/station-task-execution/station-task-execution.component';
+import { StationWeeklyPlanComponent } from './task/station-weekly-plan/station-weekly-plan.component';
 import { TaskComponent } from './task/task.component';
+import { ZhiAuditComponent } from './task/zhi-audit/zhi-audit.component';
+import { ZhiIndicatorsComponent } from './task/zhi-indicators/zhi-indicators.component';
 
 const routes: Routes = [
   {
@@ -17,10 +25,7 @@ const routes: Routes = [
       { path: '', redirectTo: '/basicInfo/unit', pathMatch: 'full' },
       {
         path: 'unit',
-        component: UnitComponent,
-        children: [
-
-        ]
+        component: UnitComponent
       },
       {
         path: 'unit/details',
@@ -28,7 +33,43 @@ const routes: Routes = [
       }
     ],
   },
-  { path: 'task', component: TaskComponent },
+  {
+    path: 'task', component: TaskComponent,
+    children: [
+      {
+        path: 'indicators',
+        component: ZhiIndicatorsComponent,
+      },
+      {
+        path: 'audit',
+        component: ZhiAuditComponent,
+      },
+      {
+        path: 'monthlytaskoverview',
+        component: DaMonthlyTaskOverviewComponent,
+      },
+      {
+        path: 'subordinateaudit',
+        component: DaSubordinateAuditComponent,
+      },
+      {
+        path: 'oneselfplan',
+        component: DaOneselfPlanComponent,
+      },
+      {
+        path: 'taskexecution',
+        component: StationTaskExecutionComponent,
+      },
+      {
+        path: 'taskapply',
+        component: StationTaskApplyComponent,
+      },
+      {
+        path: 'weeklyplan',
+        component: StationWeeklyPlanComponent,
+      }
+    ],
+  },
   { path: 'statistic', component: StatisticAnalysisComponent },
   {
     path: 'system', component: SystemManagementComponent,

src/app/home/home.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-
+import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
 import { HomeRoutingModule } from './home-routing.module';
 import { NavComponent } from './nav/nav.component';
 import { NzLayoutModule } from 'ng-zorro-antd/layout';
@@ -13,7 +13,15 @@ import { RoleComponent } from './system-management/role/role.component';
 import { OrComponent } from './system-management/or/or.component';
 import { UnitComponent } from './basic-info/unit/unit.component';
 import { UnitDetailsComponent } from './basic-info/unit-details/unit-details.component';
-
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { ZhiIndicatorsComponent } from './task/zhi-indicators/zhi-indicators.component';
+import { ZhiAuditComponent } from './task/zhi-audit/zhi-audit.component';
+import { DaMonthlyTaskOverviewComponent } from './task/da-monthly-task-overview/da-monthly-task-overview.component';
+import { DaSubordinateAuditComponent } from './task/da-subordinate-audit/da-subordinate-audit.component';
+import { DaOneselfPlanComponent } from './task/da-oneself-plan/da-oneself-plan.component';
+import { StationTaskExecutionComponent } from './task/station-task-execution/station-task-execution.component';
+import { StationTaskApplyComponent } from './task/station-task-apply/station-task-apply.component';
+import { StationWeeklyPlanComponent } from './task/station-weekly-plan/station-weekly-plan.component';
 @NgModule({
   declarations: [
     NavComponent,
@@ -25,12 +33,22 @@ import { UnitDetailsComponent } from './basic-info/unit-details/unit-details.com
     RoleComponent,
     OrComponent,
     UnitComponent,
-    UnitDetailsComponent
+    UnitDetailsComponent,
+    ZhiIndicatorsComponent,
+    ZhiAuditComponent,
+    DaMonthlyTaskOverviewComponent,
+    DaSubordinateAuditComponent,
+    DaOneselfPlanComponent,
+    StationTaskExecutionComponent,
+    StationTaskApplyComponent,
+    StationWeeklyPlanComponent
   ],
   imports: [
     CommonModule,
     HomeRoutingModule,
-    NzLayoutModule
+    NzLayoutModule,
+    NzDropDownModule,
+    NzIconModule
   ]
 })
 export class HomeModule { }

src/app/home/nav/nav.component.html

@@ -1,5 +1,9 @@
 <nz-layout>
     <nz-header>
+        <div class="logobox">
+            <img src="../../../assets/images/logo/logo.png" alt="">
+            <span>防消一体化综合治理平台</span>
+        </div>
         <ul>
             <li [routerLink]="['/basicInfo']" routerLinkActive="router-link-active">
                 <div>基础信息</div>
@@ -14,6 +18,16 @@
                 <div>系统管理</div>
             </li>
         </ul>
+        <div class="headerbtn">
+            <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>
+        </div>
     </nz-header>
     <nz-layout>
         <nz-content>

src/app/home/nav/nav.component.scss

@@ -9,9 +9,19 @@ nz-header {
   background: #2C4DC0;
   color: #fff;
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
   align-items: center;
-
+  padding: 0 20px;
+  .logobox{
+    img{
+      margin-right: 8px;
+    }
+  }
+  .headerbtn{
+    a{
+      color: #fff;
+    }
+  }
   ul {
     display: flex;
     justify-content: center;

src/app/home/nav/nav.component.ts

@@ -13,7 +13,7 @@ export class NavComponent implements OnInit {
   ngOnInit(): void {
     
   }
-  xxx() {
-    this.router.navigate(['/task']);
+  signOut() {
+    this.router.navigate(['/login'])
   }
 }

src/app/home/statistic-analysis/statistic-analysis.component.html

@@ -1 +1 @@
-<p>statistic-analysis works!</p>
+<p>功能开发中</p>

src/app/home/system-management/role/role.component.html

@@ -1 +1,3 @@
-<p>role works!</p>
+<div class="box">
+
+</div>

src/app/home/system-management/role/role.component.scss

@@ -0,0 +1,3 @@
+.box {
+  
+}

src/app/home/system-management/system-management.component.html

@@ -1,12 +1,23 @@
 <div class="box">
     <div class="nav">
         <ul>
-            <li [routerLink]="['/system/role']" routerLinkActive="router-link-active">角色管理</li>
-            <li [routerLink]="['/system/user']" routerLinkActive="router-link-active">用户管理</li>
-            <li [routerLink]="['/system/or']" routerLinkActive="router-link-active">组织机构管理</li>
+            <li [routerLink]="['/system/role']" routerLinkActive="router-link-active">
+                <i nz-icon nzType="user" nzTheme="outline"></i>
+                角色管理
+            </li>
+            <li [routerLink]="['/system/user']" routerLinkActive="router-link-active">
+                <i nz-icon nzType="team" nzTheme="outline"></i>
+                用户管理
+            </li>
+            <li [routerLink]="['/system/or']" routerLinkActive="router-link-active">
+                <i nz-icon nzType="cluster" nzTheme="outline"></i>
+                组织机构管理
+            </li>
         </ul>
     </div>
     <div class="content">
-        <router-outlet></router-outlet>
+        <div class="routerbox">
+            <router-outlet></router-outlet>
+        </div>
     </div>
 </div>

src/app/home/system-management/system-management.component.scss

@@ -4,32 +4,46 @@
 
 
 .nav {
-  width: 200px;
+  width: 210px;
   height: 100%;
   background: #2c4dc1;
+
   ul {
     li {
-      height: 48px;
-      line-height: 48px;
+      height: 50px;
+      line-height: 50px;
       cursor: pointer;
+      text-align: left;
+
+      i {
+        margin: 0 8px 0 28px;
+      }
     }
   }
 }
 
 .router-link-active {
   background: #fff;
+  color: #2C4DC0;
 }
 
 .content {
   flex: 1;
 }
 
-.router-link-active {
-  color: black;
-}
-
 .content {
   box-sizing: border-box;
-  padding: 8px;
+  padding: 16px;
   background: #F6F5F8;
+
+  .routerbox {
+    width: 100%;
+    height: 100%;
+    background: #FFFFFF;
+    box-shadow: 0px 3px 8px 1px rgba(0, 0, 0, 0.0800);
+    border-radius: 4px 4px 4px 4px;
+    opacity: 1;
+    border: 1px solid #E4E7EC;
+    overflow-y: auto;
+  }
 }

src/app/home/task/da-monthly-task-overview/da-monthly-task-overview.component.html

@@ -0,0 +1 @@
+<p>da-monthly-task-overview works!</p>

src/app/home/task/da-monthly-task-overview/da-monthly-task-overview.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-da-monthly-task-overview',
+  templateUrl: './da-monthly-task-overview.component.html',
+  styleUrls: ['./da-monthly-task-overview.component.scss']
+})
+export class DaMonthlyTaskOverviewComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/home/task/da-oneself-plan/da-oneself-plan.component.html

@@ -0,0 +1 @@
+<p>da-oneself-plan works!</p>

src/app/home/task/da-oneself-plan/da-oneself-plan.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-da-oneself-plan',
+  templateUrl: './da-oneself-plan.component.html',
+  styleUrls: ['./da-oneself-plan.component.scss']
+})
+export class DaOneselfPlanComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/home/task/da-subordinate-audit/da-subordinate-audit.component.html

@@ -0,0 +1 @@
+<p>da-subordinate-audit works!</p>

src/app/home/task/da-subordinate-audit/da-subordinate-audit.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-da-subordinate-audit',
+  templateUrl: './da-subordinate-audit.component.html',
+  styleUrls: ['./da-subordinate-audit.component.scss']
+})
+export class DaSubordinateAuditComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/home/task/station-task-apply/station-task-apply.component.html

@@ -0,0 +1 @@
+<p>station-task-apply works!</p>

src/app/home/task/station-task-apply/station-task-apply.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-station-task-apply',
+  templateUrl: './station-task-apply.component.html',
+  styleUrls: ['./station-task-apply.component.scss']
+})
+export class StationTaskApplyComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/home/task/station-task-execution/station-task-execution.component.html

@@ -0,0 +1 @@
+<p>station-task-execution works!</p>

src/app/home/task/station-task-execution/station-task-execution.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-station-task-execution',
+  templateUrl: './station-task-execution.component.html',
+  styleUrls: ['./station-task-execution.component.scss']
+})
+export class StationTaskExecutionComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/home/task/station-weekly-plan/station-weekly-plan.component.html

@@ -0,0 +1 @@
+<p>station-weekly-plan works!</p>

src/app/home/task/station-weekly-plan/station-weekly-plan.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-station-weekly-plan',
+  templateUrl: './station-weekly-plan.component.html',
+  styleUrls: ['./station-weekly-plan.component.scss']
+})
+export class StationWeeklyPlanComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/home/task/task.component.html

@@ -1 +1,47 @@
-<p>task works!</p>
+<div class="box">
+    <div class="nav">
+        <ul>
+            <li [routerLink]="['/task/indicators']" routerLinkActive="router-link-active">
+                <i nz-icon nzType="book" nzTheme="outline"></i>
+                任务指标
+            </li>
+            <li [routerLink]="['/task/audit']" routerLinkActive="router-link-active">
+                <i nz-icon nzType="audit" nzTheme="outline"></i>
+                工作审批
+            </li>
+        </ul>
+        <ul>
+            <li [routerLink]="['/task/monthlytaskoverview']" routerLinkActive="router-link-active">
+                <i nz-icon nzType="appstore" nzTheme="outline"></i>
+                月度任务总览
+            </li>
+            <li [routerLink]="['/task/subordinateaudit']" routerLinkActive="router-link-active">
+                <i nz-icon nzType="file-protect" nzTheme="outline"></i>
+                下级任务申请
+            </li>
+            <li [routerLink]="['/task/oneselfplan']" routerLinkActive="router-link-active">
+                <i nz-icon nzType="file-text" nzTheme="outline"></i>
+                本级计划
+            </li>
+        </ul>
+        <ul>
+            <li [routerLink]="['/task/taskexecution']" routerLinkActive="router-link-active">
+                <i nz-icon nzType="file-protect" nzTheme="outline"></i>
+                任务执行
+            </li>
+            <li [routerLink]="['/task/taskapply']" routerLinkActive="router-link-active">
+                <i nz-icon nzType="file-text" nzTheme="outline"></i>
+                任务申请
+            </li>
+            <li [routerLink]="['/task/weeklyplan']" routerLinkActive="router-link-active">
+                <i nz-icon nzType="container" nzTheme="outline"></i>
+                生成周计划
+            </li>
+        </ul>
+    </div>
+    <div class="content">
+        <div class="routerbox">
+            <router-outlet></router-outlet>
+        </div>
+    </div>
+</div>

src/app/home/task/task.component.scss

@@ -0,0 +1,51 @@
+.box {
+  display: flex;
+}
+
+
+.nav {
+  width: 210px;
+  height: 100%;
+  background: #2c4dc1;
+
+  ul {
+    margin-bottom: 0px;
+    li {
+      height: 50px;
+      line-height: 50px;
+      cursor: pointer;
+      text-align: left;
+
+      i {
+        margin: 0 8px 0 28px;
+      }
+    }
+  }
+}
+
+.router-link-active {
+  background: #fff;
+  color: #2C4DC0;
+}
+
+.content {
+  flex: 1;
+}
+
+
+.content {
+  box-sizing: border-box;
+  padding: 16px;
+  background: #F6F5F8;
+
+  .routerbox {
+    width: 100%;
+    height: 100%;
+    background: #FFFFFF;
+    box-shadow: 0px 3px 8px 1px rgba(0, 0, 0, 0.0800);
+    border-radius: 4px 4px 4px 4px;
+    opacity: 1;
+    border: 1px solid #E4E7EC;
+    overflow-y: auto;
+  }
+}

src/app/home/task/zhi-audit/zhi-audit.component.html

@@ -0,0 +1 @@
+<p>zhi-audit works!</p>

src/app/home/task/zhi-audit/zhi-audit.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-zhi-audit',
+  templateUrl: './zhi-audit.component.html',
+  styleUrls: ['./zhi-audit.component.scss']
+})
+export class ZhiAuditComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/home/task/zhi-indicators/zhi-indicators.component.html

@@ -0,0 +1 @@
+<p>zhi-indicators works!</p>

src/app/home/task/zhi-indicators/zhi-indicators.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-zhi-indicators',
+  templateUrl: './zhi-indicators.component.html',
+  styleUrls: ['./zhi-indicators.component.scss']
+})
+export class ZhiIndicatorsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}