[新增]创建弹出框文件

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

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

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

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

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

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

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

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

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

@@ -19,21 +19,21 @@
             </thead>
             <tbody id="table">
                 <tr *ngFor="let item of headerTable.data;let key = index">
-                    <th>
+                    <td>
                         <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>
+                    </td>
+                    <td>证件编号</td>
+                    <td>证件有效期</td>
+                    <td>有效期类型</td>
+                    <td>办理类型</td>
+                    <td>通知内容</td>
+                    <td>通知状态</td>
+                    <td>处置状态</td>
+                    <td class="operation">
+                        <span class="blueColor">忽略</span>
                         <span class="greyColor" (click)="dispose()">处置</span>
-                        <span class="buleColor">申请延期</span>
-                    </th>
+                        <span class="blueColor">申请延期</span>
+                    </td>
                 </tr>
             </tbody>
         </nz-table>

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

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

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

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

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

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

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

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

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

@@ -1 +1,51 @@
-<p>update-category works!</p>
+<div class="box" id="updateLicense">
+    <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>
+                    <th>预警状态</th>
+                    <th>操作</th>
+                </tr>
+            </thead>
+            <tbody id="table">
+                <tr *ngFor="let item of headerTable.data;let key = index">
+                    <td>
+                        <span style="margin-left: 25%;">证件名称</span>
+                    </td>
+                    <td>证件编号</td>
+                    <td>证件有效期</td>
+                    <td>
+                        <img src="../../../../assets/images/bgImg.png" alt=""
+                            (click)="viewImg('../../../../assets/images/bgImg.png')">
+                    </td>
+                    <td>有效期类型</td>
+                    <td>办理类型</td>
+                    <td>是否年检</td>
+                    <td>提交时间</td>
+                    <td>审核状态</td>
+                    <td>预警状态</td>
+                    <td class="operation">
+                        <span class="blueColor" (click)="edit(item)">编辑</span>
+                        <span class="blueColor" (click)="details(item)">详情</span>
+                        <span class="blueColor">提交审核</span>
+                    </td>
+                </tr>
+            </tbody>
+        </nz-table>
+
+    </div>
+</div>
+
+

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

@@ -0,0 +1,20 @@
+.box{
+    width: 100%;
+    height: 100%;
+}
+.tablebox{
+    width: 100%;
+    height: 100%;
+    .operation{
+        span{
+            margin-right: 6px;
+        }
+    }
+    #table{
+        img{
+            width: 30px;
+            height: 30px;
+            cursor: pointer;
+        }
+    }
+}

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

@@ -1,5 +1,7 @@
 import { Component, OnInit } from '@angular/core';
-
+import { Observable, fromEvent } from 'rxjs';
+import { debounceTime } from 'rxjs/operators';
+import Viewer from 'viewerjs';
 @Component({
   selector: 'app-update-category',
   templateUrl: './update-category.component.html',
@@ -8,8 +10,46 @@ import { Component, OnInit } from '@angular/core';
 export class UpdateCategoryComponent 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'
+    });
+  }
+  //查看图片
+  viewImg(url) {
+    // url.split('?')[0]
+    let dom = document.getElementById(`viewerjs`)
+    let pObjs = dom.childNodes;
+    let node = document.createElement("img")
+    node.style.display = "none";
+    node.src = url;
+    node.id = 'img'
+    dom.appendChild(node)
+    setTimeout(() => {
+      let viewer = new Viewer(document.getElementById(`viewerjs`), {
+        hidden: () => {
+          dom.removeChild(pObjs[0]);
+          viewer.destroy();
+        }
+      });
+      node.click();
+    }, 0);
+  }
+
+  dispose() {
+    console.log('处置')
   }
 
+  edit(item) {
+    
+  }
+  details(item) {
+
+  }
 }

src/app/pages/pages.module.ts

@@ -64,10 +64,14 @@ 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';
+import { EditUpdateCategoryComponent } from './license/update-category/edit-update-category/edit-update-category.component';
+import { DetailsUpdateCategoryComponent } from './license/update-category/details-update-category/details-update-category.component';
+import { EditFileCategoryComponent } from './license/file-category/edit-file-category/edit-file-category.component';
+import { DetailsFileCategoryComponent } from './license/file-category/details-file-category/details-file-category.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, NavBarComponent, InformComponent, UpdateCategoryComponent, FileCategoryComponent, HistoriesComponent],
+    AddequipmentComponent, EditequipmentComponent, PlanAdminComponent, GetOutOfLineDetailsComponent, DispositionComponent, OilUnloadingProcessComponent, HomePageComponent, OilUnloadingProcessListComponent, ChangePasswordComponent, FacilitySortPipe, WarningStatisticsListComponent, DisposeequipmentComponent, NavBarComponent, InformComponent, UpdateCategoryComponent, FileCategoryComponent, HistoriesComponent, EditUpdateCategoryComponent, DetailsUpdateCategoryComponent, EditFileCategoryComponent, DetailsFileCategoryComponent],
 
 
   imports: [

src/app/pages/plan-admin/plan-admin.component.html

@@ -75,27 +75,27 @@
         </thead>
         <tbody id="table">
           <tr *ngFor="let item of headerTable.data;let key = index">
-            <th nzEllipsis [title]="item.stationName">
+            <td nzEllipsis [title]="item.stationName">
               <div style="width: 20px;height: 20px;display: inline-block;margin-left: 20px;margin-right: 6px;">
                 <img src="../../../assets/images/3d.png" alt="" *ngIf="item.hasBuildingInfo">
               </div>
               {{item.stationName}}
-            </th>
-            <th nzEllipsis [title]="item.locationName">{{item.locationName}}</th>
-            <th nzEllipsis [title]="item.companyName">{{item.companyName}}</th>
-            <th nzEllipsis [title]="item.leaderName" style="text-align: center;">{{item.leaderName}}</th>
-            <th nzEllipsis [title]="item.leaderContact" style="text-align: center;">{{item.leaderContact}}</th>
-            <th nzEllipsis [title]="item.stationLevel" style="text-align: center;">{{item.stationLevel}}</th>
-            <th nzEllipsis [title]="item.sellVariety" style="text-align: center;">{{item.sellVariety}}</th>
-            <th style="text-align: center;">{{item.gasStationCount}}</th>
-            <th style="text-align: center;">{{item.laneCount}}</th>
-            <th style="text-align: center;">
+            </td>
+            <td nzEllipsis [title]="item.locationName">{{item.locationName}}</td>
+            <td nzEllipsis [title]="item.companyName">{{item.companyName}}</td>
+            <td nzEllipsis [title]="item.leaderName" style="text-align: center;">{{item.leaderName}}</td>
+            <td nzEllipsis [title]="item.leaderContact" style="text-align: center;">{{item.leaderContact}}</td>
+            <td nzEllipsis [title]="item.stationLevel" style="text-align: center;">{{item.stationLevel}}</td>
+            <td nzEllipsis [title]="item.sellVariety" style="text-align: center;">{{item.sellVariety}}</td>
+            <td style="text-align: center;">{{item.gasStationCount}}</td>
+            <td style="text-align: center;">{{item.laneCount}}</td>
+            <td style="text-align: center;">
               <span>{{item.tankVolume}}</span>
               <span>{{item.tankVolume ? 'm³' : null}}</span>
-            </th>
-            <th>
+            </td>
+            <td>
               <span class="look" (click)="look(item)" style="cursor:pointer;color: #36A2FF">查看</span>
-            </th>
+            </td>
           </tr>
         </tbody>
       </nz-table>

src/index.html

@@ -9,6 +9,7 @@
 </head>
 <body>
   <app-root></app-root>
+  <div id="viewerjs" style="display:none"></div>
 </body>
 <script src="./assets/js/abp.js"></script>
 <script src="./assets/js/echarts-tooltip-carousel.js"></script>

src/theme.less

@@ -1,6 +1,6 @@
 @import "../node_modules/ng-zorro-antd/ng-zorro-antd.less";
 
-.buleColor {
+.blueColor {
   color: #36A2FF;
   cursor: pointer;
 }
@@ -294,7 +294,8 @@
 
 //蓝色 表格 tree
 #stationPlanBox,
-#inform {
+#inform,
+#updateLicense {
   ::-webkit-input-placeholder {
     /* WebKit browsers */
     color: #345d85;
@@ -368,13 +369,13 @@
     border-bottom: 1px solid #0d3761;
   }
 
-  .ant-table-tbody>tr>th {
-    font-weight: 400;
+  .ant-table-tbody>tr>td {
+    font-weight: 300;
     font-family: synormal;
     background: none;
     border-bottom: none;
     padding: 0;
-    color: #91CCFF;
+    color: #C4E2FC;
   }
 
   .look {