基本信息

README.md

@@ -1 +1 @@
-# 济南项目
+# 济南防消一体化综合治理平台

src/app/CustomReuseStrategy.ts

@@ -15,13 +15,19 @@ export class CustomReuseStrategy implements RouteReuseStrategy {
     /** 表示对所有路由允许复用 如果你有路由不想利用可以在这加一些业务逻辑判断 */
     shouldDetach(route: ActivatedRouteSnapshot): boolean {
         console.log('shouldDetach======>', route);
+        if (route.routeConfig.path == 'basicInfo') {
+            return false;
+        } else {
             return true;
         }
 
+    }
+
     /** 当路由离开时会触发。按path作为key存储路由快照&组件当前实例对象 */
     store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
-        console.log('store======>', route, handle);
+        console.log('store======>route', route);
-        if(route.routeConfig.path == 'host'){
+        // console.log('store======>handle', handle);
+        if (route.routeConfig.path == 'unit') {
             CustomReuseStrategy.handlers[this.getRouteUrl(route)] = handle;
         }
     }

src/app/app-routing.module.ts

@@ -10,7 +10,7 @@ const routes: Routes = [
   { path: 'login', component: LoginComponent, },
   {
     path: '', component: NavComponent, canActivate: [AuthGuard], children: [
-      { path: 'homePage', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) }
+      { path: '', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) }
     ]
   }//主页面
 ];

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

@@ -1,53 +1,10 @@
-<div class="orbox" id="orbox">
+<div class="box">
-    <div class="topbox">
+    <div class="nav">
-      <div class="lefttop">
+        <ul>
-        <span>菜单列表</span>
+            <li [routerLink]="['/basicInfo/unit']" routerLinkActive="router-link-active">基本信息</li>
-        <!-- <span><img style="vertical-align: top;" src="../../../assets/images/icon/orgrey.png" alt="">
+        </ul>
-          {{totalCount}}个</span> -->
     </div>
-      <div class="righttop">
+    <div class="content">
-        <!-- <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
+        <router-outlet></router-outlet>
-          <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" [nzTreeTemplate]="nzTreeTemplate" nzDraggable
-      nzBlockNode [nzExpandedIcon]="multiExpandedIconTpl">
-    </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)" *ngIf="!node.origin.isGasStation">新增</span>
-          <span (click)="editOr(node)">编辑</span>
-          <span [ngClass]="{'grey':node.origin.children && node.origin.children.length != 0}"
-            (click)="deleteOr(node)">删除</span>
-        </span>
-      </div>
-    </ng-template>
-    <ng-template #multiExpandedIconTpl let-node let-origin="origin">
-      <ng-container *ngIf="node.children.length == 0; else elseTemplate">
-  
-      </ng-container>
-      <ng-template #elseTemplate>
-        <i nz-icon [nzType]="node.isExpanded ? 'caret-down' : 'caret-right'" class="ant-tree-switcher-line-icon"></i>
-      </ng-template>
-    </ng-template> -->
     </div>
+</div>

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

@@ -1,80 +1,36 @@
-.orbox {
+.box {
-    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 {
+.nav {
-        height: 32px;
+  width: 200px;
-      }
+  height: 100%;
-    }
+  background: #2c4dc1;
-  }
 
-  .treeTitle {
+  ul {
-    width: 700px;
+    li {
-    height: 36px;
+      height: 48px;
-    line-height: 36px;
+      line-height: 48px;
-    display: flex;
+      cursor: pointer;
-    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 {
+.router-link-active {
-    position: absolute;
+  background: #fff;
-    right: 0;
+}
 
-    span {
+.content {
-      margin-left: 40px;
+  flex: 1;
-    }
+}
 
-    span:nth-child(1),
+.router-link-active {
-    span:nth-child(2),
+  color: black;
-    span:nth-child(3) {
+}
-      color: #2399FF;
-    }
-  
-    .grey{
-      color: rgba(0, 13, 33, 0.48)!important;
-    }
-  }
 
+.content {
+  box-sizing: border-box;
+  padding: 8px;
+  background: #F6F5F8;
+}

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

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-
+import { CustomReuseStrategy } from 'src/app/CustomReuseStrategy';
 @Component({
   selector: 'app-basic-info',
   templateUrl: './basic-info.component.html',
@@ -12,4 +12,8 @@ export class BasicInfoComponent implements OnInit {
   ngOnInit(): void {
   }
 
+  ngOnDestroy(): void {
+    console.log(5555555)
+    CustomReuseStrategy.deleteRouteSnapshot('/basicInfo/unit');
+  }
 }

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

@@ -0,0 +1 @@
+<button (click)="back()">返回</button>

src/app/home/basic-info/unit-details/unit-details.component.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit } from '@angular/core';
+import { CustomReuseStrategy } from 'src/app/CustomReuseStrategy';
+@Component({
+  selector: 'app-unit-details',
+  templateUrl: './unit-details.component.html',
+  styleUrls: ['./unit-details.component.scss']
+})
+export class UnitDetailsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+  back() {
+    window.history.back()
+  }
+}

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

@@ -0,0 +1,2 @@
+<button (click)="next()">下一页</button>
+<input placeholder="label" value="value">

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

@@ -0,0 +1,6 @@
+p{
+    color: black;
+}
+input{
+    color: red;
+}

src/app/home/basic-info/unit/unit.component.ts

@@ -0,0 +1,22 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-unit',
+  templateUrl: './unit.component.html',
+  styleUrls: ['./unit.component.scss']
+})
+export class UnitComponent implements OnInit {
+
+  constructor(private router: Router) { }
+
+  ngOnInit(): void {
+  }
+  next() {
+    this.router.navigate(['/basicInfo/unit/details']);
+  }
+  ngOnDestroy(): void {
+    console.log('删除了6666666666666')
+    // CustomReuseStrategy.deleteRouteSnapshot('/basicInfo/unit');
+  }
+}

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

@@ -1,6 +1,8 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { BasicInfoComponent } from './basic-info/basic-info.component';
+import { UnitDetailsComponent } from './basic-info/unit-details/unit-details.component';
+import { UnitComponent } from './basic-info/unit/unit.component';
 import { StatisticAnalysisComponent } from './statistic-analysis/statistic-analysis.component';
 import { OrComponent } from './system-management/or/or.component';
 import { RoleComponent } from './system-management/role/role.component';
@@ -9,16 +11,29 @@ import { UserComponent } from './system-management/user/user.component';
 import { TaskComponent } from './task/task.component';
 
 const routes: Routes = [
-  { path: 'basicInfo', component: BasicInfoComponent },
+  {
+    path: 'basicInfo', component: BasicInfoComponent,
+    children: [
+      { path: '', redirectTo: '/basicInfo/unit', pathMatch: 'full' },
+      {
+        path: 'unit',
+        component: UnitComponent,
+        children: [
+
+        ]
+      },
+      {
+        path: 'unit/details',
+        component: UnitDetailsComponent
+      }
+    ],
+  },
   { path: 'task', component: TaskComponent },
   { path: 'statistic', component: StatisticAnalysisComponent },
   {
     path: 'system', component: SystemManagementComponent,
     children: [
-      {
+      { path: '', redirectTo: '/system/role', pathMatch: 'full' },
-        path: '',
-        component: RoleComponent,
-      },
       {
         path: 'role',
         component: RoleComponent,

src/app/home/home.module.ts

@@ -11,6 +11,8 @@ import { SystemManagementComponent } from './system-management/system-management
 import { UserComponent } from './system-management/user/user.component';
 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';
 
 @NgModule({
   declarations: [
@@ -21,7 +23,9 @@ import { OrComponent } from './system-management/or/or.component';
     SystemManagementComponent,
     UserComponent,
     RoleComponent,
-    OrComponent
+    OrComponent,
+    UnitComponent,
+    UnitDetailsComponent
   ],
   imports: [
     CommonModule,

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

@@ -1,10 +1,18 @@
 <nz-layout>
     <nz-header>
         <ul>
-            <li [routerLink]="['/homePage/basicInfo']" routerLinkActive="router-link-active">基础信息</li>
+            <li [routerLink]="['/basicInfo']" routerLinkActive="router-link-active">
-            <li [routerLink]="['/homePage/task']" routerLinkActive="router-link-active">一体化任务</li>
+                <div>基础信息</div>
-            <li [routerLink]="['/homePage/statistic']" routerLinkActive="router-link-active">统计分析</li>
+            </li>
-            <li [routerLink]="['/homePage/system']" routerLinkActive="router-link-active">系统管理</li>
+            <li [routerLink]="['/task']" routerLinkActive="router-link-active">
+                <div>一体化任务</div>
+            </li>
+            <li [routerLink]="['/statistic']" routerLinkActive="router-link-active">
+                <div>统计分析</div>
+            </li>
+            <li [routerLink]="['/system']" routerLinkActive="router-link-active">
+                <div>系统管理</div>
+            </li>
         </ul>
     </nz-header>
     <nz-layout>

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

@@ -4,33 +4,56 @@
 
 
 nz-header {
-  background: #7dbcea;
+  height: 50px;
+  line-height: 50px;
+  background: #2C4DC0;
   color: #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 
   ul {
     display: flex;
+    justify-content: center;
+    margin-bottom: 0px;
+    width: 600px;
 
     li {
       margin: 0 6px;
+      width: 120px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
     }
+
   }
 }
 
+.router-link-active {
+  background: linear-gradient(45deg, rgba(255, 255, 255, 0) 0%, rgba(180, 202, 252, 0.5000) 50%, #769FF9 100%);
+  text-align: center;
+  transform: skewX(-20deg);
+}
+
+.router-link-active>div {
+  height: 50px;
+  transform: skewX(20deg);
+  border-bottom: 2px solid #95FFCF;
+  color: #fff;
+}
+
 nz-footer {
   line-height: 1.5;
 }
 
 nz-sider {
-  background: #3ba0e9;
+  background: #2D4DbF;
   color: #fff;
-  line-height: 120px;
 }
 
 nz-content {
-  background: rgba(16, 142, 233, 1);
   color: #fff;
-  min-height: 120px;
-  line-height: 120px;
 }
 
 nz-layout {

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

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-nav',
@@ -7,9 +8,12 @@ import { Component, OnInit } from '@angular/core';
 })
 export class NavComponent implements OnInit {
 
-  constructor() { }
+  constructor(private router: Router) { }
 
   ngOnInit(): void {
-  }
     
+  }
+  xxx() {
+    this.router.navigate(['/task']);
+  }
 }

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

@@ -1,9 +1,9 @@
 <div class="box">
     <div class="nav">
         <ul>
-            <li [routerLink]="['/homePage/system/role']" routerLinkActive="router-link-active">角色管理</li>
+            <li [routerLink]="['/system/role']" routerLinkActive="router-link-active">角色管理</li>
-            <li [routerLink]="['/homePage/system/user']" routerLinkActive="router-link-active">用户管理</li>
+            <li [routerLink]="['/system/user']" routerLinkActive="router-link-active">用户管理</li>
-            <li [routerLink]="['/homePage/system/or']" routerLinkActive="router-link-active">组织机构管理</li>
+            <li [routerLink]="['/system/or']" routerLinkActive="router-link-active">组织机构管理</li>
         </ul>
     </div>
     <div class="content">

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

@@ -2,12 +2,22 @@
   display: flex;
 }
 
+
 .nav {
-  width: 300px;
+  width: 200px;
   height: 100%;
-  border-right: 1px solid red;
+  background: #2c4dc1;
-
+  ul {
+    li {
+      height: 48px;
+      line-height: 48px;
+      cursor: pointer;
+    }
+  }
+}
 
+.router-link-active {
+  background: #fff;
 }
 
 .content {
@@ -17,3 +27,9 @@
 .router-link-active {
   color: black;
 }
+
+.content {
+  box-sizing: border-box;
+  padding: 8px;
+  background: #F6F5F8;
+}

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

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-
+import { CustomReuseStrategy } from 'src/app/CustomReuseStrategy';
 @Component({
   selector: 'app-system-management',
   templateUrl: './system-management.component.html',
@@ -10,6 +10,7 @@ export class SystemManagementComponent implements OnInit {
   constructor() { }
 
   ngOnInit(): void {
+    // CustomReuseStrategy.deleteRouteSnapshot('/basicInfo/unit');
   }
 
 }

src/app/home/task/task.component.ts

@@ -11,5 +11,4 @@ export class TaskComponent implements OnInit {
 
   ngOnInit(): void {
   }
-
 }

src/app/pages/login/login.component.ts

@@ -70,7 +70,6 @@ export class LoginComponent implements OnInit {
 
 
 
-
   remember: any//记住密码
   autologin: any//自动登录
   isLoading = false;
@@ -107,7 +106,7 @@ export class LoginComponent implements OnInit {
         this.autoLogin()
         sessionStorage.setItem("token", data.token);
         sessionStorage.setItem("refreshToken", data.refreshToken);
-        this.router.navigate(['/homePage'])
+        this.router.navigate(['/system'])
         this.message.create('success', `登录成功`);
 
         //调用服务中的function刷新token

src/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>边缘主机管理系统</title>
+  <title>防消一体化综合治理平台</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">

src/styles.scss

@@ -5,7 +5,10 @@
 @import "~ng-zorro-antd/button/style/index.min.css";
 /* 引入组件样式 */
 
-
+@font-face {
+  font-family: synormal;
+  src: url("./assets/font-family/synormal.OTF");
+}
 
 /* css初始化 */
 html,
@@ -15,6 +18,8 @@ body {
   width: 100%;
   height: 100%;
   overflow: hidden;
+  font-family: synormal !important;
+
 }
 
 body {
@@ -75,6 +80,10 @@ a {
   color: #000;
 }
 
+p {
+  color: #000;
+}
+
 ul,
 ol,
 li {
@@ -92,6 +101,14 @@ textarea {
   background-color: #999;
 }
 
+::-webkit-scrollbar {
+  width: 5px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: #999;
+}
+
 app-root {
   height: 100%;
 }