[新增]证件-通知

src/app/pages/home/home.component.html

@@ -30,6 +30,9 @@
       <li [routerLink]="['/records/petrolStation']" routerLinkActive="router-link-active">
         预警记录
       </li>
+      <li [routerLink]="['/license/petrolStation']" routerLinkActive="router-link-active">
+        证件
+      </li>
     </div>
 
 

src/app/pages/home/home.component.ts

@@ -43,40 +43,34 @@ export class HomeComponent implements OnInit {
   userName: string
   ngOnInit(): void {
 
-    this.navChangeService.getMessage().subscribe((message: any) => {
+    // this.navChangeService.getMessage().subscribe((message: any) => {
-      console.log(message);//send a message
+    //   console.log(message);//send a message
-      if (message.name == 'oilstation') {
+    //   if (message.name == 'oilstation') {
-        this.isGasStationNav = true
+    //     this.isGasStationNav = true
-      }
+    //   }
-    });
+    // });
-
 
     if (this.router.url.indexOf('petrolStation') != -1 && sessionStorage.getItem('isGasStation') == 'false') {//控制返回按钮显示
+      this.isGasStationNav = true
       this.isGasStationBack = true
     } else {
+      this.isGasStationNav = false
       this.isGasStationBack = false
     }
 
-    // if (this.router.url.indexOf('petrolStation') != -1 && sessionStorage.getItem('isGasStation') == 'true') {
-    //   this.isGasStation = true
-    // } else {
-    //   this.isGasStation = false
-    // }
-
     if (sessionStorage.getItem('isGasStation') == 'true') {
       this.isGasStation = true
       this.isGasStationNav = true
-    } else {
+    } 
-      this.isGasStation = false
-      this.isGasStationNav = false
-    }
 
     this.router.events.pipe(
       filter(event => event instanceof NavigationEnd)
     ).subscribe((event: any) => {
       if (event.url.indexOf('petrolStation') != -1 && sessionStorage.getItem('isGasStation') == 'false') {//控制返回按钮显示
+        this.isGasStationNav = true
         this.isGasStationBack = true
       } else {
+        this.isGasStationNav = false
         this.isGasStationBack = false
       }
     });

src/app/pages/license/file-category/file-category.component.html

@@ -0,0 +1 @@
+<p>file-category works!</p>

src/app/pages/license/file-category/file-category.component.ts

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

src/app/pages/license/histories/histories.component.html

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

src/app/pages/license/histories/histories.component.ts

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

src/app/pages/license/inform/inform.component.html

@@ -0,0 +1,42 @@
+<div class="box" id="inform">
+    <div class="tablebox" id="tablebox">
+        <nz-table *ngIf="tableScrollHeight" [nzLoading]="tableSpin" [nzPageSize]='9999' #headerTable [nzData]="list"
+            [nzShowPagination]="false" [nzScroll]="{ y:tableScrollHeight }" [nzNoResult]='null' nzTableLayout="fixed">
+            <thead>
+                <tr>
+                    <th [nzWidth]="'16%'">
+                        <span style="margin-left: 25%;">证件名称</span>
+                    </th>
+                    <th>证件编号</th>
+                    <th>证件有效期</th>
+                    <th>有效期类型</th>
+                    <th>办理类型</th>
+                    <th>通知内容</th>
+                    <th>通知状态</th>
+                    <th>处置状态</th>
+                    <th>操作</th>
+                </tr>
+            </thead>
+            <tbody id="table">
+                <tr *ngFor="let item of headerTable.data;let key = index">
+                    <th>
+                        <span style="margin-left: 25%;">证件名称</span>
+                    </th>
+                    <th>证件编号</th>
+                    <th>证件有效期</th>
+                    <th>有效期类型</th>
+                    <th>办理类型</th>
+                    <th>通知内容</th>
+                    <th>通知状态</th>
+                    <th>处置状态</th>
+                    <th class="operation">
+                        <span class="buleColor">忽略</span>
+                        <span class="greyColor" (click)="dispose()">处置</span>
+                        <span class="buleColor">申请延期</span>
+                    </th>
+                </tr>
+            </tbody>
+        </nz-table>
+
+    </div>
+</div>

src/app/pages/license/inform/inform.component.scss

@@ -0,0 +1,13 @@
+.box{
+    width: 100%;
+    height: 100%;
+}
+.tablebox{
+    width: 100%;
+    height: 100%;
+    .operation{
+        span{
+            margin-right: 6px;
+        }
+    }
+}

src/app/pages/license/inform/inform.component.ts

@@ -0,0 +1,32 @@
+import { Component, OnInit } from '@angular/core';
+import { Observable, fromEvent } from 'rxjs';
+import { debounceTime } from 'rxjs/operators';
+@Component({
+  selector: 'app-inform',
+  templateUrl: './inform.component.html',
+  styleUrls: ['./inform.component.scss']
+})
+export class InformComponent implements OnInit {
+
+  constructor() { }
+  tableSpin = false
+  list = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
+
+  tableScrollHeight
+  ngOnInit(): void {
+    this.tableScrollHeight = (document.getElementById('tablebox').clientHeight - 42) + 'px'
+    // 页面监听
+    fromEvent(window, 'resize').pipe(debounceTime(100)).subscribe((event) => {
+      this.tableScrollHeight = (document.getElementById('tablebox').clientHeight - 42) + 'px'
+    });
+  }
+
+
+
+
+
+
+  dispose() {
+    console.log('处置')
+  }
+}

src/app/pages/license/nav-bar/nav-bar.component.html

@@ -0,0 +1,19 @@
+<div class="license" id="license">
+    <div class="title">
+        <div class="titlebox">
+            <img src="../../../assets/images/logosm.png" alt="">
+            <div class="nav">
+                <div class="navitem">
+                    <span *ngFor="let item of navList" [ngClass]="{'grey': selectedItem != item}"
+                        (click)="selectNav(item)">{{item}}</span>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="content">
+        <app-inform *ngIf="selectedItem == navList[0]"></app-inform>
+        <app-update-category *ngIf="selectedItem == navList[1]"></app-update-category>
+        <app-file-category *ngIf="selectedItem == navList[2]"></app-file-category>
+        <app-histories *ngIf="selectedItem == navList[3]"></app-histories>
+    </div>
+</div>

src/app/pages/license/nav-bar/nav-bar.component.scss

@@ -0,0 +1,75 @@
+.license {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.title {
+  width: 100%;
+  height: 64px;
+  box-sizing: border-box;
+  padding: 0 28px;
+  margin: 13px 0;
+  position: relative;
+
+  .titlebox {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+
+    img {
+      width: 65px;
+      height: 65px;
+    }
+
+    .nav {
+      flex: 1;
+      height: 48px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      // background-image: linear-gradient(to right, #002147, #033565, #064e8e, #064e8e, #033565, #002147);
+      background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, rgba(35, 153, 255, 0.32) 50%, rgba(35, 153, 255, 0) 100%);
+
+      .navitem {
+        width: 100%;
+        height: 32px;
+        display: flex;
+        align-items: center;
+        // background-image: linear-gradient(to right, #002147, #0f5ca0, #1c88e6, #1c88e6, #0f5ca0, #002147);
+        background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, rgba(35, 153, 255, 0.8) 50%, rgba(35, 153, 255, 0) 100%);
+
+        span {
+          margin-left: 10px;
+          color: #bce0ff;
+          font-size: 20px;
+          font-family: titlefont;
+          cursor: pointer;
+        }
+
+        span:nth-child(1) {
+          margin-left: 12px;
+        }
+
+        .grey {
+          color: #68829F;
+        }
+      }
+
+    }
+  }
+
+  .packup {
+    position: absolute;
+    right: 33px;
+    top: 16px;
+    cursor: pointer;
+  }
+}
+.content{
+    flex: 1;
+    box-sizing: border-box;
+    padding: 0 40px 20px 40px;
+}

src/app/pages/license/nav-bar/nav-bar.component.ts

@@ -0,0 +1,20 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-nav-bar',
+  templateUrl: './nav-bar.component.html',
+  styleUrls: ['./nav-bar.component.scss']
+})
+export class NavBarComponent implements OnInit {
+
+  constructor() { }
+
+  navList = ['通知','更新类证件','档案类证件','历史纪录']
+  selectedItem = '通知'
+  selectNav(item){
+    this.selectedItem = item
+  }
+  ngOnInit(): void {
+  }
+
+}

src/app/pages/license/update-category/update-category.component.html

@@ -0,0 +1 @@
+<p>update-category works!</p>

src/app/pages/license/update-category/update-category.component.ts

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

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

@@ -13,6 +13,7 @@ import { HomePageComponent } from './home-page/home-page.component';
 import { OilUnloadingProcessListComponent } from './oil-unloading-process-list/oil-unloading-process-list.component';
 import { init3DGuard } from './init3D.guard';
 import { WarningStatisticsListComponent } from './warning-statistics-list/warning-statistics-list.component';
+import { NavBarComponent } from './license/nav-bar/nav-bar.component';
 
 const routes: Routes = [
     { path: 'homepage', component: HomePageComponent },
@@ -27,7 +28,8 @@ const routes: Routes = [
     { path: 'records/warningstatisticslist', component: WarningStatisticsListComponent },
     { path: 'records/petrolStation/warningstatisticslist', component: WarningStatisticsListComponent },
     { path: 'equipmentInfo', component: EquipmentInfoComponent },
-    { path: 'oliStationInfo', component: OilStationInfoComponent }
+    { path: 'oliStationInfo', component: OilStationInfoComponent },
+    { path: 'license/petrolStation', component: NavBarComponent }
 ];
 
 @NgModule({

src/app/pages/pages.module.ts

@@ -59,10 +59,15 @@ import { FacilitySortPipe } from './facility-sort.pipe';
 import { WarningStatisticsListComponent } from './warning-statistics-list/warning-statistics-list.component';
 import { DisposeequipmentComponent } from './warning-statistics-list/disposeequipment/disposeequipment.component';
 import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
+import { NavBarComponent } from './license/nav-bar/nav-bar.component';
+import { InformComponent } from './license/inform/inform.component';
+import { UpdateCategoryComponent } from './license/update-category/update-category.component';
+import { FileCategoryComponent } from './license/file-category/file-category.component';
+import { HistoriesComponent } from './license/histories/histories.component';
 @NgModule({
   declarations: [LoginComponent, RegisterComponent, HomeComponent, PlanComponent, TodayWarningComponent, CriminalRecordsComponent,
     TodayWarningAdminComponent, CriminalRecordsAdminComponent, LeftDomainComponent, EquipmentInfoComponent, OilStationInfoComponent,
-    AddequipmentComponent, EditequipmentComponent, PlanAdminComponent, GetOutOfLineDetailsComponent, DispositionComponent, OilUnloadingProcessComponent, HomePageComponent, OilUnloadingProcessListComponent, ChangePasswordComponent, FacilitySortPipe, WarningStatisticsListComponent, DisposeequipmentComponent],
+    AddequipmentComponent, EditequipmentComponent, PlanAdminComponent, GetOutOfLineDetailsComponent, DispositionComponent, OilUnloadingProcessComponent, HomePageComponent, OilUnloadingProcessListComponent, ChangePasswordComponent, FacilitySortPipe, WarningStatisticsListComponent, DisposeequipmentComponent, NavBarComponent, InformComponent, UpdateCategoryComponent, FileCategoryComponent, HistoriesComponent],
 
 
   imports: [

src/theme.less

@@ -1,6 +1,27 @@
 @import "../node_modules/ng-zorro-antd/ng-zorro-antd.less";
 
+.buleColor {
+  color: #36A2FF;
+  cursor: pointer;
+}
+
+.greyColor {
+  color: #5D687A;
+  cursor: not-allowed;
+  // pointer-events: none;
+}
+
+.yellowColor {
+  color: #FFBD4B;
+}
 
+.greenColor {
+  color: #4BFFD4;
+}
+
+.redColor {
+  color: #FF4B65;
+}
 
 //分页器
 #recordsboxadmin,
@@ -26,8 +47,6 @@
   }
 }
 
-
-
 //查询重置按钮
 .submit {
   background: rgba(0, 129, 255, 0.61);
@@ -60,6 +79,7 @@
   background: #FF9963;
 }
 
+
 //接收报警弹出框
 .ant-notification {
   width: 500px;
@@ -165,28 +185,12 @@
   }
 }
 
-//表格
-#userBox,
-#roleBox,
-#hostbox {
-  .ant-table-thead>tr>th {
-    background: rgba(145, 204, 255, 0.15);
-  }
-}
 
-#hostbox {
-
-  .ant-table-thead>tr>th,
-  .ant-table-tbody>tr>td {
-    text-align: center;
-  }
-}
 
 @select-background: transparent;
 @border-color-base: #91CCFF;
 
 //日期选择器
-// @input-placeholder-color: #345d85;
 #recordsboxadmin,
 #recordsbox,
 #warningbox,
@@ -227,15 +231,11 @@
     color: #36A2FF;
   }
 
-  //日期选择器
-  // @input-placeholder-color: #345d85;
-
   .ant-picker-suffix,
   .ant-picker-input>input {
     color: rgba(145, 204, 255, 0.95);
   }
 
-
 }
 
 
@@ -250,7 +250,7 @@
 }
 
 
-//input填充100%
+//input填充100% --- 油站基本信息页面
 #oilStationInfo {
   nz-form-item {
     margin-bottom: 0px;
@@ -292,8 +292,26 @@
   }
 }
 
+//蓝色 表格 tree
+#stationPlanBox,
+#inform {
+  ::-webkit-input-placeholder {
+    /* WebKit browsers */
+    color: #345d85;
+  }
 
-#stationPlanBox {
+  //滚动条样式
+  ::-webkit-scrollbar {
+    width: 5px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-image: linear-gradient(#2495f8, #1c73c2, #0a3d6a, #061d3c);
+  }
+
+  ::-webkit-scrollbar-track {
+    background-color: #061d3c;
+  }
 
   .ant-tree .ant-tree-node-content-wrapper:hover,
   .ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected {
@@ -322,7 +340,7 @@
 
   nz-table {
     flex: 1;
-    width: 96%;
+    width: 100%;
   }
 
   .ant-table {
@@ -381,25 +399,20 @@
   }
 }
 
+#stationPlanBox {
+  nz-table {
+    width: 96%;
+  }
+}
 
 .ant-modal-close-x {
   color: #fff;
 }
 
-
 .maxHeightTreeSelect {
   max-height: 280px;
 }
 
-.cdk-overlay-pane {
-  // position: fixed!important;
-  // top: 47px;
-  // right: 26px!important;
-  // left: none!important;
-
-  // width: 88px;
-}
-
 .vertical-center-modal {
   display: flex;
   align-items: center;
@@ -421,6 +434,28 @@
   top: 50%;
   transform: translate(-50%, -50%);
 }
-.ant-pagination-prev,.ant-pagination-next{
+
+.ant-pagination-prev,
+.ant-pagination-next {
   overflow: hidden;
-}
+}
+
+
+
+
+//管理员界面 ---- 表格
+#userBox,
+#roleBox,
+#hostbox {
+  .ant-table-thead>tr>th {
+    background: rgba(145, 204, 255, 0.15);
+  }
+}
+
+#hostbox {
+
+  .ant-table-thead>tr>th,
+  .ant-table-tbody>tr>td {
+    text-align: center;
+  }
+}